6.4 KiB
title | localeTitle |
---|---|
Grid Layout | Diseño de cuadrícula |
Diseño de cuadrícula
CSS Grid Layout, conocido simplemente como Grid, es un esquema de diseño que es el más nuevo y más poderoso en CSS. Es compatible con todos los navegadores principales y proporciona una forma de colocar elementos en la página y moverlos.
Puede asignar automáticamente elementos a áreas , ajustar su tamaño y cambiar su tamaño, encargarse de crear columnas y filas según el patrón que usted defina y realizar todos los cálculos utilizando la unidad fr
recién introducida.
¿Por qué Grid?
- Puede tener fácilmente una cuadrícula de 12 columnas con una línea de CSS.
grid-template-columns: repeat(12, 1fr)
- Grid te permite mover las cosas en cualquier dirección. A diferencia de Flex, donde puede mover elementos horizontalmente (
flex-direction: row
) o verticalmente (flex-direction: column
), no ambos al mismo tiempo, Grid le permite mover cualquier elemento de la cuadrícula a cualquier área de cuadrícula predefinida en la página. Los elementos que muevas no tienen que ser adyacentes. - Con CSS Grid, puede cambiar el orden de los elementos HTML utilizando solo CSS . Mueva algo de arriba a derecha, mueva los elementos que estaban en el pie de página a la barra lateral, etc. En lugar de mover
<div>
de<footer>
a<aside>
en el HTML, puede cambiar su ubicación congrid-area
de lagrid-area
en el Hoja de estilo CSS.
Grid vs. Flex
- Flex es unidimensional, ya sea horizontal o vertical, mientras que Grid es bidimensional, lo que significa que puede mover elementos tanto en planos horizontales como verticales
- En Grid, aplicamos estilos de diseño al contenedor principal y no a los elementos. Por otro lado, Flex se dirige al elemento flex para establecer propiedades como
flex-basis
,flex-grow
yflex-shrink
- Grid y Flex no son mutuamente excluyentes. Puedes usar ambos en el mismo proyecto.
Verificando la compatibilidad del navegador con @supports
Lo ideal es que cuando construyas un sitio, lo diseñes con Grid y utilices Flex como alternativa. Puede averiguar si su navegador admite cuadrícula con la regla @support
CSS (consulta de características). Aquí hay un ejemplo:
.container {
display: grid; /* display grid by default */
}
@supports not (display: grid) { /* if grid is not supported by the browser */
.container {
display: flex; /* display flex instead of grid */
}
}
Empezando
Para convertir cualquier elemento en una cuadrícula, debe asignar su propiedad de display
a la grid
, así:
.conatiner {
display: grid;
}
Y eso es. Acabas de hacer de tu .container
una grilla. Cada elemento dentro del .container
se convierte automáticamente en un elemento de cuadrícula.
Definiendo plantillas
Filas y columnas
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;
Áreas
grid-template-areas:
"aaaa"
"bcde"
"bcde"
"ffff";
o
grid-template-areas:
"header header header header"
"nav main main sidebar";
Áreas de cuadrícula
Aquí hay un código de ejemplo sobre cómo definir y asignar áreas de cuadrícula
.site {
display: grid;
grid-template-areas: /* applied to grid container */
"head head" /* you're assigning cells to areas by giving the cells an area name */
"nav main" /* how many values kind of depends on how many cells you have in the grid */
"nav foot";
}
.site > header {
grid-area: head;
}
.site > nav {
grid-area: nav;
}
.site > main {
grid-area: main;
}
.site > footer {
grid-area: foot;
}
La unidad de fr
Grid introduce una nueva unidad fr
, que significa fracción . Lo bueno de usar la unidad fr
es que se encarga de los cálculos por ti. El uso de fr
evita los problemas de margen y relleno. Con %
y em
etc. se convierte en una ecuación matemática cuando se calcula grid-gap
. Si usó la unidad de fr
, calculará automáticamente el tamaño de la columna y el de la canaleta y ajustará el tamaño de las columnas en consecuencia, además, tampoco habrá huecos de sangrado al final.
Ejemplos
Cambio del orden de los elementos en función del tamaño de la pantalla.
Digamos que desea mover el pie de página al final en pantallas pequeñas y a la derecha en pantallas más grandes, y hay un montón de otros elementos HTML entre los dos.
La solución simple es cambiar las grid-template-areas
la grid-template-areas
según el tamaño de la pantalla. También puede cambiar el número de columnas y filas según el tamaño de la pantalla . Esta es una alternativa mucho más limpia y simple al sistema Grid de Bootstrap ( col-xs-8 col-sm-6 col-md-4 col-lg-3
).
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
Vea la Cuadrícula de la pluma CSS por ejemplo - 2 (áreas de cuadrícula + separación de cuadrícula) por Aamnah Akram ( @aamnah ) en CodePen .
Más información:
- CSS Grid Palyground por Mozilla Gran punto de partida si eres nuevo en CSS Grids. Tiene elementos visuales para ayudarte a entender la terminología fácilmente.
- YouTube: Morten Rand-Hendriksen: CSS Grid lo cambia todo (Acerca de los diseños web) Esta presentación lo convencerá en menos de una hora por qué CSS Grids es genial y por qué / cómo debe usarlos
- Videos: Serie de videos Learn Grid Layout por Rachel Andrew Rachel Andrew es considerada una experta en el tema. Los títulos de los videos pueden parecer extraños y abrumadores, pero el contenido es corto y al punto
- Libro: Prepárese para el diseño de cuadrícula de CSS por Rachel Andrew