Tutorial de cuadrícula CSS

CSS Grid es el nuevo niño en la ciudad de CSS, y aunque aún no es totalmente compatible con todos los navegadores, será el futuro sistema para diseños.

La cuadrícula. Una frontera digital. Traté de imaginar grupos de información a medida que se movían a través de la computadora. ¿Qué aspecto tenían? ¿Buques? Motocicletas? ¿Eran los circuitos como autopistas? Seguí soñando con un mundo que pensé que nunca vería. Y luego, un día ... entré. - Tron: Legacy

Introducción a CSS Grid

CSS Grid es un enfoque fundamentalmente nuevo para crear diseños utilizando CSS.

Mantenga un ojo en elPágina de diseño de cuadrícula CSS en caniuse.compara averiguar qué navegadores lo admiten actualmente. En el momento de redactar este artículo, abril de 2019, todos los principales navegadores (excepto IE, que nunca lo admitirán) ya son compatibles con esta tecnología, que cubre el 92% de todos los usuarios.

CSS Grid no es un competidor deFlexbox. Interoperan y colaboran en diseños complejos, porque CSS Grid funciona en 2 dimensiones (filas Y columnas) mientras que Flexbox funciona en una sola dimensión (filas O columnas).

La creación de diseños para la web ha sido tradicionalmente un tema complicado.

No profundizaré en las razones de esta complejidad, que es un tema complejo en sí mismo, pero puedes pensar que eres un ser humano muy afortunado porque hoy en díatienes 2 herramientas muy poderosas y bien soportadas a tu disposición:

  • CSS Flexbox
  • Cuadrícula CSS

Estas 2 son las herramientas para crear los diseños web del futuro.

A menos que necesite admitir navegadores antiguos como IE8 e IE9, no hay razón para meterse con cosas como:

  • Diseños de mesa
  • Flotadores
  • trucos de clearfix
  • display: tabletrucos

En esta guía hay todo lo que necesita saber para pasar de un conocimiento cero de CSS Grid a ser un usuario competente.

Los basicos

El diseño de la cuadrícula CSS se activa en un elemento contenedor (que puede ser undivo cualquier otra etiqueta) configurandodisplay: grid.

Al igual que con flexbox, puede definir algunas propiedades en el contenedor y algunas propiedades en cada elemento individual de la cuadrícula.

Estas propiedades combinadas determinarán el aspecto final de la cuadrícula.

Las propiedades más básicas del contenedor songrid-template-columnsygrid-template-rows.

columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula

Esas propiedades definen el número de columnas y filas en la cuadrícula, y también establecen el ancho de cada columna / fila.

El siguiente fragmento define una cuadrícula con 4 columnas cada una de 200 px de ancho y 2 filas con una altura de 300 px cada una.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

A grid with 4 columns and 2 rows

Aquí hay otro ejemplo de una cuadrícula con 2 columnas y 2 filas:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

A grid with 2 columns and 2 rows

Dimensiones automáticas

Muchas veces puede tener un tamaño de encabezado fijo, un tamaño de pie de página fijo y el contenido principal que es flexible en altura, dependiendo de su longitud. En este caso puede utilizar elautopalabra clave:

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

Diferentes dimensiones de columnas y filas

En los ejemplos anteriores, creamos cuadrículas bonitas y regulares utilizando los mismos valores para las filas y los mismos valores para las columnas.

Puede especificar cualquier valor para cada fila / columna, para crear muchos diseños diferentes:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

A grid with varying columns and rows dimensions

Otro ejemplo:

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

A grid with varying columns and rows dimensions

Agregar espacio entre las celdas

A menos que se especifique, no hay espacio entre las celdas.

Puede agregar espaciado usando esas propiedades:

  • grid-column-gap
  • grid-row-gap

o la sintaxis taquigráficagrid-gap.

Ejemplo:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

A grid with gap between rows and columns

El mismo diseño usando la abreviatura:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Generación de elementos en múltiples columnas y / o filas

Cada elemento de celda tiene la opción de ocupar más de una casilla en la fila y expandirse horizontal o verticalmente para obtener más espacio, respetando las proporciones de cuadrícula establecidas en el contenedor.

Esas son las propiedades que usaremos para eso:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

Ejemplo:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Editing the dimensions of some cells

Los números corresponden a la línea vertical que separa cada columna, comenzando por 1:

The numbers correspond to the vertical line that separates each column

El mismo principio se aplica agrid-row-startygrid-row-end, excepto que esta vez en lugar de tomar más columnas, una celda toma más filas.

Sintaxis taquigráfica

Esas propiedades tienen una sintaxis abreviada proporcionada por:

  • grid-column
  • grid-row

El uso es simple, aquí se explica cómo replicar el diseño anterior:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

Usandogrid-areacomo una taquigrafía

losgrid-areaLa propiedad se puede utilizar como una abreviatura de lagrid-columnygrid-rowabreviaturas, cuando necesita aplicar ambos a un solo elemento. En vez de tener:

.item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

Puedes usar

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

(inicio de fila de cuadrícula / inicio de columna de cuadrícula / fin de fila de cuadrícula / fin de columna de cuadrícula)

Usandospan

Otro enfoque es establecer la columna / fila inicial y establecer cuántas debe ocupar usandospan:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

spantambién funciona con la sintaxis no abreviada:

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

y también puede usar en la propiedad de inicio. En este caso, la posición final se utilizará como referencia, yspancontará "hacia atrás":

.item1 {
  grid-column-start: span 2;
  grid-column-end: 3;
}

Más configuración de cuadrícula

Usando fracciones

Especificar el ancho exacto de cada columna o fila no es ideal en todos los casos.

Una fracción es una unidad de espacio.

El siguiente ejemplo divide una cuadrícula en 3 columnas con el mismo ancho,13del espacio disponible cada uno.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Usando porcentajes y rem

También puede usar porcentajes y mezclar y combinar fracciones, píxeles, rem y porcentajes:

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

Usandorepeat()

repeat()es una función especial que toma un número que indica la cantidad de veces que se repetirá una fila / columna y la longitud de cada una.

Si todas las columnas tienen el mismo ancho, puede especificar el diseño utilizando esta sintaxis:

.container {
  grid-template-columns: repeat(4, 100px);
}

Esto crea 4 columnas con el mismo ancho.

O usando fracciones:

.container {
  grid-template-columns: repeat(4, 1fr);
}

Especifique un ancho mínimo para una fila

Caso de uso común: tiene una barra lateral que nunca se contrae más de una cierta cantidad de píxeles cuando cambia el tamaño de la ventana.

Aquí hay un ejemplo donde la barra lateral toma14de la pantalla y nunca ocupa menos de 200px:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

También puede establecer solo un valor máximo utilizando elautopalabra clave:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

o solo un valor mínimo:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

Posicionamiento de elementos usandogrid-template-areas

Por defecto, los elementos se colocan en la cuadrícula siguiendo su orden en la estructura HTML.

Usandogrid-template-areasPuede definir áreas de plantilla para moverlas en la cuadrícula y también para generar un elemento en varias filas / columnas en lugar de usargrid-column.

He aquí un ejemplo:

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

A pesar de su orden original, los artículos se colocan dondegrid-template-areasdefinir, dependiendo de lagrid-areapropiedad asociada a ellos.

Agregar celdas vacías en áreas de plantilla

Puede establecer una celda vacía usando el punto.en lugar de un nombre de área engrid-template-areas:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

Llenar una página con una cuadrícula

Puede hacer que una cuadrícula se extienda para llenar la página usandofr:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Aquí hay un ejemplo simple del uso de CSS Grid para crear un diseño de sitio que proporciona un encabezado en la parte superior, una parte principal con barra lateral a la izquierda y contenido a la derecha, y un pie de página después.

Layout example

Aquí está el marcado:

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

y aquí está el CSS:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

Agregué algunos colores para hacerlo más bonito, pero básicamente asigna a cada etiqueta diferente ungrid-areanombre, que se utiliza en elgrid-template-areaspropiedad en.wrapper.

Cuando el diseño es más pequeño, podemos colocar la barra lateral debajo del contenido mediante una consulta de medios:

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

Ver en CodePen

Ver la plumaEjemplo de cuadrícula CSS con barra lateralpor Flavio Copes (@flaviocopios) enCodePen.

Tech Wiki Online!