Day 14 - CSS grid pt.2
by Nino · 52 things on Twos
- Mimo: Semi-completed (12. Flexbox Items)
- ---
- Named Areas
- grid-template-areas (inside grid-container rule)
- grid-area (inside grid-item rule)
- use the grid-area property to assign an area name
- we do this inside the CSS rule for each item
- to define how grid areas are laid out on the grid, we use the grid-template-areas property inside the grid-container-rule
- to span a grid item across multiple grid columns, repeat the grid item name
grid-template-areas: "item1 item1 item2";
- we can leave a grid area empty with . or ...
grid-template-areas: ". item1 . item2";
- to create different areas for different rows, add each row in between quotes
grid-template-areas: "item 1 item2" "item3 item4";
// to make it easier to read
grid-template-areas:
"item 1 item2"
"item3 item4";
- Sections Using Named Areas
- Aligning Grid Items (grid-container properties)
- Rows (HORIZONTAL)
- justify-items: stretch;
// default
- we use the justify-items property to align grid items along the row axis
- justify-items: start;
// aligns grid items to the left edge of the grid area along the row axis)
- justify-items: end;
// aligns grid items to the right edge of the grid area along the row axis)
- justify-items: center;
// used to align the grid items to the center of the row axis
- Columns (VERTICAL)
- align-items: stretch;
// aligns grid items along the column axis
- align-items: start; or end;
// aligns grid items to the top or bottom edge of the grid area along the column axis
- align-items: center;
// aligns the grid items to the center of the column axis
- Using CSS Grid and Flexbox
- turn grid items into flex containers
- a class element can be both a grid item and a flexbox container, we can use properties that belong to both layouts
- ---
- Named Areas
- grid-template-areas: "item-1 item-2 item-3"
- grid-area: main;
- grid-area: section;
- grid-area: footer;
- Aligning Grid Items (Horizontal = Justify; Vertical = Align)
- justify-items: stretch;
- justify-items: start;
- justify-items: end;
- justify-items: center;
- align-items: stretch;
- align-items: start;
- align-items: end;
- align-items: center;
- ---
- Mimo: semi-completed (13. CSS Grid)