Propiedades de Grid

Description

Mapa mental sobre los contenedores de Grid
Salma Kalife
Mind Map by Salma Kalife, updated more than 1 year ago
Salma Kalife
Created by Salma Kalife over 5 years ago
38
0

Resource summary

Propiedades de Grid
  1. Grid Container
    1. display
      1. Define el elemento como un contenedor de grid y establece un nuevo formato de contexto de grid para su contenido.
        1. valores
          1. grid
            1. display: grid;
            2. inline-grid
        2. grid-template-columns
          1. grid-template-rows
            1. Define las columnas y listas del grid con unas listas de valores separados-por-espacios.
              1. valores
                1. <track-size>
                  1. grid-template-columns: 30% 50%;
                    1. grid-template-rows: 45vh 55vh;
                  2. <line-name>
            2. grid-template-areas
              1. Define una grid template usando de referencia los nombres de las grid areas las cuales son especificadas con la propiedad de grid-area.
                1. valores
                  1. <grid-area-name>
                    1. header {grid-area: encabezado;} section {grid-area: contenedor;} footer {grid-area: piepagina;} body>div {grid-template-areas: "encabezado encabezado encabezado" "contenedor contenedor contenedor" "piepagina piepagina piepagina";
                    2. none
                2. grid-gap
                  1. Especifica el espacio entre las columnas/las filas.
                    1. valores
                      1. <grid-row-gap> <grid-column-gap>
                        1. grid-gap: 10px 20px;
                  2. justify-items
                    1. Alinea el contenido horizontalmente.
                      1. valores
                        1. start
                          1. end
                            1. center
                              1. stretch
                                1. justify-items: stretch;
                          2. align-items
                            1. Alinear contenido verticalmente.
                              1. valores
                                1. start
                                  1. align-items: start;
                                  2. center
                                    1. end
                                      1. stretch
                                  3. justify-content
                                    1. Alinear todo el grid horizontalmente.
                                      1. valores
                                        1. start
                                          1. end
                                            1. stretch
                                              1. center
                                                1. space-around
                                                  1. justify-content: space-around;
                                                  2. space-between
                                                    1. space-evenly
                                                2. align-content
                                                  1. Alinear todo el grid verticalmente.
                                                    1. valores
                                                      1. start
                                                        1. center
                                                          1. end
                                                            1. stretch
                                                              1. space-around
                                                                1. space-between
                                                                  1. align-content: space-between;
                                                                  2. space-evenly
                                                            2. Introducción
                                                              1. CSS Grid Layout es un sistema de layout bidimensional basado en el grid que se dedica a cambiar completamente la manera en la que diseñamos interfaces de usuario basadas en grid.
                                                              2. Basic and Browser Support
                                                                1. Para poder comenzar tienes que definir un elemento de container con display: grid; definir los tamaños de las columnas y las filas con grid-template-columns y grid-template-rows, y luego poner a sus elementos hijos en el grid con grid-column and grid-row.
                                                                  1. Desde marzo del 2017, la mayoría de los navegadores apoyaban no CSS Grid: Chrome (incluyendo Android), Firefox, Safari (incluyendo iOS), y Opera.
                                                                  2. Terminología Importante
                                                                    1. Antes de indagar más sobre el concepto de Grid, es muy importante conocer la terminología
                                                                      1. Grid Container
                                                                        1. Es el elemento en el cual display: grid es aplicado. Es el padre directo de todos los grid items.
                                                                        2. Grid Item
                                                                          1. Los hijos (descendientes directos) del grid container.
                                                                          2. Grid Line
                                                                            1. Las lineas divisoras que hacen la estuctura del grid.
                                                                            2. Grid Track
                                                                              1. El espacio entre dos lineas de gird adyacentes.
                                                                              2. Grid Cell
                                                                                1. El espacio entre las lineas de dos filas adyacentes y dos columnas adyacentes
                                                                                2. Grid Area
                                                                                  1. Un espacio total rodeado por cuatro lineas de grid
                                                                              Show full summary Hide full summary

                                                                              Similar

                                                                              Test Diagnóstico HTML - CSS
                                                                              Bea Camacho
                                                                              Control HTML - CSS / Prototipado Web
                                                                              Lhuis .
                                                                              Bienvenido al curso
                                                                              Gustavo Enrique 2392
                                                                              Elementos de CSS
                                                                              EDUARDO ANDRES A3422
                                                                              HTML5 Leads a Web Revolution
                                                                              juandavidvego
                                                                              Unidad 2: Html, xml y css
                                                                              Lizeth Castillo
                                                                              Información General
                                                                              Hannes José Narváez
                                                                              Lenguajes en XML HTML XHTML
                                                                              América Dancer Gil
                                                                              ANIME
                                                                              Paula Olmos
                                                                              Atributo Class
                                                                              Mario Andrés Rosero Saza