Comparación de Flexbox, Grid y Column Layouts
Este artículo explica la comparación entre Flexbox, Grid y Column Layouts.
Aprenderás las diferencias entre Flexbox, Grid y Column Layouts, y cuándo usar cada uno.
YouTube Video
HTML para vista previa
css-layout-comparision.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>Comparación de Flexbox, Grid y Column Layouts
CSS flex, grid y columns son todas técnicas para alinear y organizar elementos, pero cada una tiene sus propias fortalezas y casos de uso ideales. A continuación, se presenta una explicación clara de sus diferencias mediante una comparación.
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}Características
- Adecuado para diseños unidireccionales, ya sea horizontal o vertical.
- Permite un control flexible sobre el orden y la flexibilidad de los elementos.
- Más adecuado para diseños de pequeña escala como barras de navegación y grupos de botones.
Ventajas
- Ajusta automáticamente el tamaño de los elementos secundarios.
- Puedes cambiar el orden de los elementos usando propiedades como
flex-direction,flex-wrapyorder.
Ejemplo de cómo cambiar el orden de visualización
Como ejemplo de cambio en el orden de visualización, establezcamos la propiedad flex-direction a column.
1.flex-container {
2 flex-direction: column;
3}Cuando flex-direction se establece en column, los elementos cambian de un diseño horizontal a uno vertical. El diseño cambia de izquierda a derecha a arriba hacia abajo.
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16}Características
- Ideal para diseños bidimensionales.
- Permite una definición clara de diseños basados en cuadrículas.
- Ideal para diseños más complejos y estructuración general de la página.
Ventajas
- Se pueden definir filas y columnas simultáneamente.
- Las secciones se pueden colocar utilizando áreas nombradas (
grid-area). - Los elementos secundarios se pueden colocar libremente dentro de la cuadrícula, permitiendo un control flexible del orden.
Ejemplo de cómo cambiar el orden de visualización
Como ejemplo de cambio de orden en la visualización, usemos la propiedad grid-template-areas para establecer las posiciones de visualización.
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }Como puedes ver, grid se puede usar no solo para cambiar el orden de visualización, sino también para crear diseños únicos.
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}Características
- Puedes crear fácilmente columnas estilo revista.
- Ideal para contenido de texto fluido.
- Sigue el orden de origen de HTML, lo que lo hace menos adecuado para controlar el orden de los elementos.
Ventajas
- Puede dividir texto largo automáticamente.
- Puedes crear muy fácilmente diseños estilo periódico.
Tabla de Comparación
| Característica / Caso de Uso | Flexbox | Grid | Columnas |
|---|---|---|---|
| Dimensión del Diseño | 1D (horizontal o vertical) | 2D (horizontal y vertical) | 1D (vertical) |
| Ideal Para | Alineación de componentes | Estructura de página completa | Texto de múltiples columnas |
| Flexibilidad del Diseño | Alta (orden y tamaño) | Muy alta (definición de áreas) | Baja (solo división automática) |
| Control de Hijos | Flexible | Claramente definido | Difícil de controlar |
| Intención del Diseño | Basado en el contenido | Basado en el diseño | Basado en el texto |
Resumen
- Flexbox es ideal cuando quieres alinear elementos en una fila, como encabezados o listas de tarjetas.
- Grid es adecuado cuando quieres diseñar el diseño completo, como la estructura de una página web.
- Columnas son mejores cuando quieres formatear texto en varias columnas, como en artículos o blogs.
También puedes combinarlos según sea necesario. Por ejemplo, puedes diseñar el diseño general con Grid y alinear los elementos internos con Flex.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.