Diseños flexibles de moda con cuadrícula CSS

Sep 17, 2025

Cómo

A woman sits at a laptop tweaking a CSS Grid layout

[dieciséis]

La cuadrícula CSS es perfecta para crear diseños de dos ejes de filas y columnas. La sintaxis es simple y hace que la distribución de la página sea una brisa. Los diseños que habrían requerido que varios contenedores anidados ahora se pueden describir simplemente en CSS.

La cuadrícula funciona de manera diferente a otras propiedades de diseño, ya que aplicar el valor 'cuadrícula' a la propiedad 'Pantalla' afectará a cualquier niño directo. Estos elementos ahora son elementos de cuadrícula y se colocarán de acuerdo con las reglas que estableció en el padre (a menos que esté especialmente colocado).

Llegar a empiezas con la cuadrícula

Grid trae una serie de nuevas características:

Brecha de rejilla

En lugar de usar márgenes, la cuadrícula tiene su propia propiedad para definir huecos entre los elementos de la rejilla, lo que permite que el diseño de la cuadrícula se definiera y no se ve afectado por cualquier espacio. Los sistemas de cuadrícula (como los que se encuentran en inuit y en Twitter Bootstrap) generalmente se basan en establecer márgenes negativos para alinear todo correctamente.

La unidad FR

Corto para la fracción, esta nueva unidad de medición se usa para dividir el diseño en fracciones, con o sin un espacio.

Colocación de cuadrícula

La cuadrícula CSS permite que cualquier elemento sea priorizado y colocado en cualquier lugar de la cuadrícula antes de todos los demás elementos, que luego se coloquen automáticamente.

Áreas y plantillas de cuadrícula

Se definen las áreas nombradas en la cuadrícula, que luego se pueden hacer referencia para definir el diseño de una manera casi ASCII.

mínimo máximo()

El valor de la propiedad 'MinMAX ()' le permite aplicar un tamaño mínimo y máximo para artículos de cuadrícula, columnas y filas. Esta función está lamentablemente faltando en FlexBox y en cualquier otro módulo de diseño en CSS.

Construye tus cuadrículas

Las áreas y las plantillas y plantillas de CSS Grid permiten que se alcancen fácilmente los diseños complicados. Comienzas aplicando un nombre a los elementos dentro de su cuadrícula con la propiedad 'área de la cuadrícula', por ejemplo, 'encabezado {cuadrícula: área: encabezado; } '. Una vez que haya nombrado todas las áreas en su cuadrícula, puede usar la propiedad 'Áreas de plantilla de cuadrícula' para describir el diseño.

 Áreas de plantilla de cuadrícula:
  "Encabezado de encabezado de encabezado"
  "Artículo de la barra lateral izquierda-lado derecho"
  "Footer Footer Footer"
;

El ejemplo del código anterior describe una cuadrícula de tres por tres, simplemente repita el nombre del elemento de la cuadrícula si desea que abra una columna o filas múltiples. También puede usar las consultas de medios para cambiar el diseño de la cuadrícula para pantallas de diferentes tamaños.

Luego, puede usar la nueva unidad 'FR' para definir cómo se divide el ancho entre las diferentes columnas:

 Columnas de plantilla de cuadrícula: 1FR 3FR 1FR;

El ejemplo que se muestra arriba dividirá el ancho disponible en cinco valores de ancho igual; En otras palabras, se aplicará una quinta parte a la primera columna, tres quintos a la segunda columna y la quinta parte final a la columna final.

Para dimensionar las filas, puede usar el nuevo valor de propiedad 'Minmax' para atender las columnas superior e inferior a su contenido y luego permitir que la fila intermedia abarque el espacio restante en la cuadrícula.

 Filas de plantilla de cuadrícula:
  Minmax (contenido mínimo, MAX-Contenido)
  auto
minmax (contenido de minuto, máximo de contenido);

Este artículo se publicó originalmente en el número 271 de Creative Web Design Magazine Web Designer. Comprar Número 271 o Suscríbete al diseñador web .

¿Quieres fortalecer tus habilidades de cuadrícula de CSS?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

Como desarrollador de diseñadores y front-end en una agencia de desarrollo de software, Brenda Storester ha estado utilizando la cuadrícula CSS en la producción de sitios web desde su lanzamiento inicial a los navegadores en marzo de 2017 y es un gran fan.

En su charla en Generar Nueva York del 25 al 27 de abril de 2018. , Brenda mostrará cómo puede mejorar progresivamente su sitio con la cuadrícula CSS y escribir un trackback a prueba de balas para los navegadores más antiguos (o incluso continuar usando su marco de cuadrícula actual como consecución), todos con CSS puros: No se requiere JavaScript.

Generar Nueva York tiene lugar del 25 al 27 de abril de 2018. Obtenga su boleto ahora .

Artículos relacionados:

Secretos de diseño de cuadrícula CSS revelados
Crear un diseño sensible con la cuadrícula CSS
Levántate a la velocidad con la cuadrícula CSS

Diseños flexibles de moda con cuadrícula CSS

Llegar a empiezas con la cuadrícula

Construye tus cuadrículas

¿Quieres fortalecer tus habilidades de cuadrícula de CSS?

Cómo - Artículos más populares

Cómo clasificar en Google

Dibuja el poder del contraste en el arte

Cómo hacer un meme en Photoshop

Comienza con Babel 7

10 Reglas para hacer formularios web fáciles de usar

Cómo pintar a un zombie colorido

Convierte una foto en un conjunto VR

Cómo crear manga con un Wild West Twist

Categorías