Grid : CSS Grid Layout, es un sistema de diseño bidimensional basado en cuadrículas con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posicionamiento. Al igual que las tablas, el diseño de cuadrícula nos permite alinear elementos en columnas y filas.
Para comenzar, debe definir un elemento contenedor como una cuadrícula con visualización: cuadrícula, establecer los tamaños de columna y fila con grid-template-columns y grid-template-rows, y luego colocar sus elementos secundarios en la cuadrícula con grid-column y cuadrícula-fila.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main{
display: grid;
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.gfg {
background-color: rgb(255, 255, 255);
text-align: center;
padding: 25px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2 style="text-align: center;">Welcome To GeeksForGeeks </h2>
<div class="main">
<div class="gfg">Home</div>
<div class="gfg">Read</div>
<div class="gfg">Write</div>
<div class="gfg">About Us</div>
<div class="gfg">Contact Us</div>
<div class="gfg">Privacy Policy</div>
</div>
</body>
</html>
Flexbox : El CSS Flexbox ofrece un diseño unidimensional. Es útil para asignar y alinear el espacio entre los elementos de un contenedor (hecho de cuadrículas). Funciona con todo tipo de dispositivos de visualización y tamaños de pantalla.
Para comenzar, debe definir un elemento contenedor como una cuadrícula con pantalla: flex;
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main{
display: flex;
display: flex;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.gfg {
background-color: rgb(255, 255, 255);
text-align: center;
padding: 25px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2 style="text-align: center;">Welcome To GeeksForGeeks </h2>
<div class="main">
<div class="gfg">Home</div>
<div class="gfg">Read</div>
<div class="gfg">Write</div>
<div class="gfg">About Us</div>
<div class="gfg">Contact Us</div>
<div class="gfg">Privacy Policy</div>
</div>
</body>
</html>
Singularidad en Grid y Flexbox:
Una contra dos dimensiones:
- Grid está hecho para un diseño bidimensional, mientras que Flexbox es uno. Esto significa que Flexbox puede funcionar en filas o columnas a la vez, pero Grids puede funcionar en ambos.
- Flexbox le brinda más flexibilidad mientras trabaja en cualquier elemento (fila o columna). El marcado HTML y CSS serán fáciles de administrar en este tipo de escenario.
- GRID le brinda más flexibilidad para moverse por los bloques independientemente de su marcado HTML.
Contenido primero vs Diseño primero:
- La principal singularidad entre Flexbox y Grids es que el primero funciona en el contenido, mientras que el segundo se basa en el diseño.
- El diseño de Flexbox se adapta mejor a los componentes de la aplicación y los diseños a pequeña escala, mientras que el diseño de cuadrícula está diseñado para diseños a gran escala que no tienen un diseño lineal.
Diferencia entre rejilla y Flexbox:
1. Dimensionalidad y Flexibilidad:
- Flexbox ofrece un mayor control sobre la alineación y la distribución del espacio entre los artículos. Al ser unidimensional, Flexbox solo se ocupa de columnas o filas.
- Grid tiene capacidades de diseño de dos dimensiones que permiten anchos flexibles como unidad de longitud. Esto compensa las limitaciones de Flex.
2. Alineación:
- Flex Direction permite a los desarrolladores alinear elementos vertical u horizontalmente, lo que se usa cuando los desarrolladores crean e invierten filas o columnas.
- CSS Grid implementa unidades de medida fraccionarias para la fluidez de la cuadrícula y la funcionalidad de palabras clave automáticas para ajustar columnas o filas automáticamente.
3. Gestión de artículos
- Flex Container es el elemento principal, mientras que Flex Item representa a los elementos secundarios. Flex Container puede garantizar una representación equilibrada ajustando las dimensiones de los elementos. Esto permite a los desarrolladores diseñar para tamaños de pantalla fluctuantes.
- Grid admite la colocación de contenido tanto implícito como explícito. Su automatización incorporada le permite extender automáticamente elementos de línea y copiar valores en la nueva creación desde el elemento anterior.
|
Propiedad |
Cuadrícula |
Caja flexible |
|
Dimensión |
bidimensional |
Unidimensional |
|
Características |
Puede flexionar la combinación de artículos a través de características que ocupan espacio |
Puede empujar el elemento de contenido a una alineación extrema |
|
Tipo de soporte |
Diseño primero |
Contenido primero |
Conclusión
- CSS Grids te ayuda a crear el diseño exterior de la página web. Puede crear un diseño complejo y receptivo con esto. Es por eso que se llama ‘diseño primero’.
- Flexbox ayuda principalmente a alinear contenido y mover bloques.
- Las cuadrículas CSS son para diseños 2D. Funciona tanto con filas como con columnas.
- Flexbox funciona mejor en una sola dimensión (ya sea filas O columnas).
- Será más útil y ahorrará más tiempo si usa ambos al mismo tiempo.
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA