Una cuadrícula se puede definir como un conjunto de líneas verticales y horizontales que se cruzan. El diseño CSS Grid separa una página en secciones principales. La propiedad Grid ofrece un sistema de diseño basado en cuadrículas que tiene filas y columnas. Facilita el diseño de páginas web sin posicionamiento ni flotación. El diseño de cuadrícula nos brinda una manera de crear estructuras de cuadrícula representadas en CSS, no en HTML.
Similar a la tabla, permite al usuario alinear los elementos en filas y columnas. Pero en comparación con las tablas, es fácil diseñar el diseño con la cuadrícula CSS. Podemos definir columnas y filas en la cuadrícula usando filas de plantilla de cuadrícula y columnas-plantilla-cuadricula propiedades.
Se puede crear un contenedor de cuadrícula declarando el pantalla: cuadrícula o pantalla: cuadrícula en línea sobre un elemento. El contenedor de cuadrícula contiene los elementos de una cuadrícula que se colocan dentro de las filas y columnas.
Cuadrícula versus Flexbox
Una pregunta común que surge generalmente es en qué se diferencia la cuadrícula del flexbox. La cuadrícula es para diseños bidimensionales (filas y columnas al mismo tiempo), mientras que el flexbox se usa para diseños unidimensionales (ya sea en una fila o columna). Flexbox se usa cuando algo necesita estar en línea recta.
Flexbox se utiliza para organizar los elementos en una sola columna o en una sola fila. Por otro lado, es mejor organizar la cuadrícula los elementos en múltiples columnas y filas.
Entendamos la cuadrícula en CSS usando un ejemplo.
Ejemplo
.main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight Pruébalo ahora Producción
