EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            CSS Grid para maquetar contenido con rejillas o cuadrículas

            css grid

            css grid

            CSS Grid nos permite maquetar contenido ajustándolo a cuadrículas o rejillas (grids) totalmente configurables mediante estilos CSS.

            Contenidos del artículo

            • 1. Cómo utilizar CSS Grid
              • 1.1. Propiedad display: [grid | inline-grid]
              • 1.2. Propiedades grid-template-colums y grid-template-rows
              • 1.3. Propiedades row-gap y column-gap
              • 1.4. Propiedad grid-gap

            Mediante CSS Grid podemos dividir la página en una rejilla a partir de la cual se pueden posicionar los diferentes elementos de manera muy sencilla. Gracias a los sistemas de maquetación de CSS Grid y CSS Flexbox se pueden crear estructuras con menos código y de una forma más fácil que con los métodos tradicionales.

            La diferencia básica entre CSS Grid y CSS Flexbox es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo.

            1. Cómo utilizar CSS Grid

            Para utilizar CSS Grid definiremos un contenedor padre y en su interior los ítems que se necesiten crear. Además, se precisan definir una serie de propiedades, tanto para el contenedor padre como para las rejillas que se definen en su interior. Veamos en detalle las propiedades más importantes.

            1.1. Propiedad display: [grid | inline-grid]

            Para crear la cuadrícula grid hay que definir sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid.

            <!DOCTYPE html>
            <html>
            <head>
            <style>
            .contenedor{
              display: grid;
            }
            </style>
            </head>
            <body>
            <div class="contenedor"> <!-- contenedor padre-->
              <div class="rejilla">Item 1</div> <!-- Ítems del grid -->
              <div class="rejilla">Item 2</div>
              <div class="rejilla">Item 3</div>
              <div class="rejilla">Item 4</div>
            </div>
            </body>
            </html>

            Los valores inline-gridy grid indican cómo se comporta el contenedor con respecto al contenido exterior. Con el valor inline-grid el contenedor aparece en línea con respecto al contenido exterior. Con el valor grid, el contenedor aparece en bloque con respecto al contenido exterior.

            ValorDescripción
            inline-gridCuadrícula en línea con respecto al contenido exterior
            gridCuadrícula en bloque con respecto al contenido exterior

            Ejemplo

            0

            1.2. Propiedades grid-template-colums y grid-template-rows

            Para definir el espaciado o tamaño de las columnas y las filas usamos las propiedades grid-template-colums y grid-template-rows.

            Propiedad Valor Descripción
            grid-template-columns [col1] [col2] … Tamaño de cada columna
            grid-template-rows [fila1] [fila2] … Tamaño de cada fila

            Como vemos a continuación, si definimos los siguientes valores crearemos una cuadrícula de 2 filas por 3 columnas.

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

            Podemos usar las unidades que ya conocemos como los píxeles o los porcentajes, o utilizar la unidad fr (propia del sistema CSS Grid) que indica la proporción del espacio que ocupará cada elemento. Por ejemplo, si definimos 3 columnas y le asignamos un valor 1fr a cada una, esto repartirá el espacio a partes iguales entre las 3. En otro caso, si definimos el valor 2fr a una de ellas, esa ocupará el doble de espacio que las otras.

            Ejemplo

            0

            1.3. Propiedades row-gap y column-gap

            Podemos definir el espaciado entre las rejillas mediante las propiedades row-gap y column-gap. El espaciado solo se crea entre las columnas/filas, no en los bordes exteriores.

            PropiedadDescripción
            column-gapEspaciado entre columnas
            row-gapEspaciado entre filas

            En el siguiente ejemplo, hemos definido una cuadrícula con tres columnas de igual tamaño utilizando la propiedad grid-template-columns. Luego, hemos utilizado la propiedad column-gap para establecer un espacio de 20 píxeles entre las columnas y la propiedad row-gap para establecer un espacio de 10 píxeles entre las filas. También hemos agregado algunos elementos a la cuadrícula y les hemos dado un color de fondo y un relleno para que puedas ver el efecto del espacio entre las columnas y las filas

            .contenedor{
              display: grid;
              grid-template-rows: 200px; 200px
              grid-template-columns: 200px; 200px; 200px;
              column-gap: 20px;
              row-gap: 10px;
            }

            Ejemplo

            0

            1.4. Propiedad grid-gap

            La propiedad grid-gap de CSS Grid es una propiedad abreviada para establecer tanto grid-column-gap como grid-row-gap en una sola declaración. Esta propiedad acepta uno o dos valores, donde el primer valor especifica el tamaño del espacio entre las filas y el segundo valor especifica el tamaño del espacio entre las columnas. Si solo se proporciona un valor, se aplica a ambas propiedades. Ejemplo:

            .grid-container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-gap: 10px 20px;
            }

            En este ejemplo, hemos definido una cuadrícula con tres columnas de igual tamaño utilizando la propiedad grid-template-columns. Luego, hemos utilizado la propiedad grid-gap para establecer un espacio de 10 píxeles entre las filas y un espacio de 20 píxeles entre las columnas.

            En este artículo se han visto los primeros pasos para empezar a usar CSS Grid. Además de las propiedades estudiadas, conviene conocer otras muy interesantes para conseguir alinear los elementos, cambiar su tamaño y modificar diferentes aspectos. Si quieres conocer más a fondo este sistema accede a la siguiente guía completa.

            Navegación de entradas

            ← Flexbox, modelo de caja flexible en CSS
            Centrar horizontal y verticalmente en CSS un elemento →

            Tutorial CSS Nivel Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Flexbox, modelo de caja flexible
            • 5. CSS Grid para maquetar contenido con rejillas
            • 6. Centrar horizontal y verticalmente un elemento
            • 7. Preprocesadores Less y Sass
            • 8. Prácticas CSS
            • 9. Chuleta CSS Nivel avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados