EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            adobe ilustrator
            Adobe Illustrator: una de las mejores herramientas de diseño gráfico
            01/08/2022
            analisis FODA
            Importancia de hacer un análisis FODA para tu negocio
            09/10/2022

            CSS Grid para maquetar contenido con rejillas o cuadrículas

            css grid

            css grid

            Tabla de contenidos

            • Propiedad display: [grid | inline-grid]
            • Propiedades grid-template-colums y grid-template-rows
            • Propiedades row-gap y column-gap

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

            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.

            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.

            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

            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

            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

            Como vemos a continuación, si definimos los siguientes valores crearemos un espaciado entre columnas de 20px y de 10px entre filas.

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

            En este artículos 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.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results