CSS Grid Layout en un Proyecto Real

Front-end Developers, Madrid – 21 de Septiembre, 2017

Ignacio ;)

Ignacio Villanueva

Front-end Developer en especializado en arquitectura, front-end performance y responsive web design.

WeCodeSign Podcast's LogoPodcaster en WeCodeSign

¿Quiéres saber más?

Grid Container

display: grid

display: inline-grid

FR Unit

Explicit Grid

grid-template-columns: 1fr 2fr;

grid-template-rows: 200px;

grid-auto-rows: 300px;

Gutters

grid-column-gap: 2rem;

grid-row-gap: 33px;

grid-gap: 33px;

Span

grid-row: 1 / span 2;

Repeating Tracks

grid-template-columns: repeat(3, 1fr);

minmax()

grid-template-columns: minmax(auto, 1fr) 2fr 3em;

grid-template-rows: minmax(200px, auto);

Grid Lines

Grid Lines

Grid Lines (again)

grid-column: 3 / 4;

grid-row: 2;

grid-area: 2 / 2 / 3 / 3; (grid-row-start / grid-column-start / grid-row-end / grid-column-end)

grid-auto-flow

grid-auto-flows: row;

grid-auto-flows: column;

auto-fill and auto-fit

grid-template-columns: repeat(auto-fill, 150px); (empty space)

grid-template-columns: repeat(auto-fit, 150px); (collapse empty tracks)

grid-auto-flow

grid-auto-flow: dense;

repeat(), minmax(), and auto-fit / auto-fill

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Positioning Grid Items

grid-column-start: tres;

grid-column-end: cuatro;

grid-row-start: dos;

grid-row-end: tres;

Naming Grid Lines

grid-template-rows: [uno] 1fr [dos] 1fr [tres] 1fr [cuatro];

grid-template-columns: [uno] 1fr [dos] 1fr [tres];

Magic Grid Lines

uno-start, uno-end, dos-start... cuatro-end

Grid Areas

              grid-template-areas:   "header header"
                                     "content sidebar"
                                     "footer footer";
              grid-template-rows:    150px 1fr 100px;
              grid-template-columns: 1fr 200px;
            

Anonymous Items

              <div>
                Lorem ipsum dolor sit amet, consectetur
                <div>text text text text text text </div>
              </div>
            

Nested Grids

subgrid

display: contents;

Order

Direction

direction: ltr;

direction: rtl;

@supports

@supports (display: grid-template-area) {}

Aligning Grid Items (Box Alignment)

justify-items and align-items (row)

auto

normal

start

end

center

stretch

baseline

first baseline

last baseline

Aligning Grid Items (Box Alignment)

align-items and align-self (column)

auto

normal

start

end

center

stretch

baseline

first baseline

last baseline

Aligning Grid Tracks

align-content tracks (row) and justify-content (column)

normal

start

end

center

stretch

space-around

space-between

space-evenly

baseline

first baseline

last baseline

Ejemplo

Galería de imágenes ficticia

¿Alguna pregunta?