Grids

rvsp.github.io/CSS/grid

Grids

Overview/intro
Terminology
Browser Support
Property overview
display property
grid-template-columns
grid-template-rows
Naming Grid Lines
fr and repeat()
Grid gutters
Placing items in a grid
Grid Lines
item positioning properties
Grid Item Properties
Placing an item again
Named grid areas
Alignment
Row alignment
Column alignment
justify-content
align-content
Implicit grids
White Space
minmax( min, max ) function
Intrinsic Sizing
Developer Tools

rvsp.github.io/CSS/grid

Flexbox

Grid

Terminology

Grid lines: The vertical and horizontal lines that divide the grid and separate the columns and rows. Start counting at 1, not 0.
Grid cell: A single child or unit of a CSS grid.
Grid area: Any rectangular space surrounded by four grid lines. Can contain any number of grid cells.
Grid track: The space between two grid lines. This space can be horizontal or vertical: a grid row or grid column
Grid row: A horizontal grid track.
Grid column: A vertical grid track.
Gutter or Gap: Space between two rows and two columns.

Terminology

Is it ready?

Properties Seen

On the parent

display:
grid-template-columns: 
grid-template-areas:
grid-gap:

On the child

grid-columns:
grid-row:

New values

repeat()
fr

Setting up the Grid

Properties declared on the parent

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template (shorthand)
grid-column-gap
grid-row-gap
grid-gap ( gap )
place-items      ( justify-items | align-items )
place-content   (justify-content | align-content)
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

display:

display: inline-grid;

Declaring display: grid gives you a one column grid

All the children converted to grid items

Display

Columns and Rows

Explicit grids: `grid-template-columns` & `grid-template-rows`

Defines the columns and rows of the grid with a space-separated list of values representing the track size

grid-template-columns: none | <track-list> | <auto-track-list>
grid-template-rows: none | <track-list> | <auto-track-list>

<track-list> = <line-name>? [ <track-size> | <track-repeat> ]
<track-size> - can be a length, a percentage, or a fraction of the free space (fr) in the grid
<line-name> - An ident or string

grid-template-columns: 200px 1fr max-content minmax(min-content, 1fr);

Grid

grid-template-columns & rows

grid-template-columns: 
  150px 150px 150px;
  repeat(3, 150px);
  275px repeat(2, 150px);
  100px repeat(2, 1fr) 2fr;

grid-template-rows: 
  150px 150px 150px;
  repeat(3, 150px);
  275px repeat(2, 150px);
  100px 1fr 2fr;

Mix units!!!
That's the power of grid! Or,at least one of the powers.

Naming Grid Lines

You can name grid lines:

grid-template-columns: 
  [start] 150px 150px 150px [end];

You can name none, some or all of the lines
To name, put brackets around the <ident>

Rows & Columns: Try it out

Implicit grids

Implicit track sizing

When items are placed outside of the tracks defined by grid-template-rows, grid-template-columns, and grid-template-areas, implicit grid tracks by added. These properties size those tracks



  grid-auto-columns: 
grid-auto-rows:
grid-auto-flow:

Automatic flow

automatic flow

White Space

`minmax( min, max )` function

Defines a size range greater than or equal to min and less than or equal to max.

minmax( <size> , <size> )

where <size> is:

<length> | <percentage> | <flex> | min-content | max-content | auto

Used by:

grid-template-columns: minmax(min-content, 200px) minmax(300px, 1fr) 250px;  
grid-template-rows:
grid-auto-columns: minmax( 100px , 1fr );
grid-auto-rows: minmax( 3em , max-content );

`min-max()` function

`Intrinsic Size` function

min-content: When text is wrapped as small as possible, softwrapping but not breaking any words, in the inline direction, without overflow. Usually the longest word or link, or largest image.
max-content: Size with no wrapping, even if an overflow is caused.

`min-max()` function (again)

fr and repeat()

fr
Fraction Unit
describes a fraction of the available* space

repeat()
repeat notation:
repeat(# of repeats, length)

*The fr unit distributes available space, not all space. If a tracks has a large link or image, there's' less distributable space.

`auto-fill` value

Values

length or percentage: % are relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If size of container depends on the size of its tracks, the % is treated as auto.
flex: fr: Positive fr value specifying the track’s flex factor. Each fr'ed track takes a share of the remaining space in proportion to its flex factor.
max-content: Equal to the largest of the max-contents in the grid track.
min-content: Equal to the largest of the min-contents in the grid track.
minmax(min, max): A size between min and less. If max < min, then max is ignored and minmax(min,max) is treated as min.
auto: As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.
fit-content(length or percent): Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

Adding gutters

Global (only one value per direction) spacing between grid items:

grid-column-gap: vertical space between columns
grid-row-gap: horizontal space between rows
grid-gap: Shorthand for grid-row-gap and grid-column-gap, in that order. Can take one or two lengths or percents.
gap: Not yet fully supported replacement for grid-gap used in grid, flex, columns.

    grid-column-gap: 20px;
    grid-row-gap: 1em;
    grid-gap: 1em 20px;

Margin works! Feature or bug?

Gutters: Try it out

Margins

Grid Steps: Try it out ➹

Create grid container with the display property
Optional: Create columns and rows with either:
1. grid-template-columns, and
2. grid-template-rows
or
Optional: add a gutter with grid gap or grid-column-gap and grid-row-gap

Try it out ➹

Placement

Positioning Grid Items

Understanding Grid Lines

1234

Line based placement

item positioning properties

.myItem {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 5;
  }

  .myItem {
    grid-row: 2 / 4;
    grid-column: 2 / 5;
  }

.myItem {
    grid-area: 2 / 2 / 4 / 5;
  }

Placing an item

The `grid-area` shorthand

grid-area: a / b / c / d
grid-row-start / grid-column-start / grid-row-end / grid-column-end

grid-area: a / b / c;

grid-column-end was omitted
d = named grid-column-start || auto

grid-area: a / b;

grid-row-end and grid-column-end omitted
c = named grid-row-start || auto
d = named grid-column-start || auto

grid-area: a;

Only grid-row-start is declared
if grid-row-start is named, all four longhands are set to that value. Otherwise, set to auto

Grid Item Properties

grid-column-start
grid-column-end
grid-column

grid-row-start
grid-row-end
grid-row

grid-area

justify-self
align-self

Placing an item again

Holy Grail Layout

Try it out! ➹

Solution ➹

Named grid layout

`grid-template-areas` and `grid-area`

Specifies named grid areas.

grid-template-areas: "a b b"
   "a c d";

article {
  grid-area: b;
}

Template Areas

Our magic layout:

body {
  grid-template-areas:
      "header header header"
      "nav article aside"
      "footer footer footer";
}

header {
  grid-area: header;
}
nav {
  grid-area: nav;
}
article {
  grid-area: article;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;
}

Create your named layout

Alignment

Container Properties

justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Item properties

justify-self
align-self

Row alignment: `justify-items` property

justify-items: 
  normal | stretch | baseline | start |  end | center | flex-end | 
  flex-start | legacy | safe | unsafe | left | right | 
  center | self-end | self-start | start | stretch | unset

Aligns items in the inline direction (horizontal)

justify-items: normal | stretch | 
   <baseline-position> | [ <overflow-position>? <self-position> ] |
  [ legacy || [ left | right | center ] ]

<baseline-position> = baseline | first baseline (start) | last baseline (end)

<overflow-position>? <self-position> = [safe | unsafe]? [right | center | left |
   start | flex-start | flex-end | end | self-start]

aligning all the content within each cell

justify-items

New terms

<overflow-position> = unsafe | safe

safe
If it overflows the alignment container, it aligns as if the alignment mode were start.

unsafe
No matter the relative sizes overflowing, the alignment value is honored.

legacy || left | center | right

legacy
Value inherits into descendants. Computes to inherit (if declared) or normal (if defaulting) if left | center | right not present.

Column alignment: `align-items` property

Aligns items in the block direction (vertical)

align-items: 
  baseline | center | 
  end | flex-end | flex-start | left |  
  normal | right | safe | self-end | self-start | 
  start | stretch | unsafe

aligns content of all the grid cells to the content within each cell
individual grid cell content alignment can be overwritten with align-self and justify-self.

align-items

Do both: `place-items` property

place-items: <align-items>  <justify-items

shorthand for align-items and justify items
Order matters! align items is first.
If only one value is declared, will be applied to both.

place-items

Aligning the Grid

Defines how the items are aligned with respect to the grid if the size of all the items combined is not the same size as the container.

justify-content: baseline | center | end | flex-end | flex-start | 
   left | normal | right | space-around | space-between | space-evenly | start | 
   stretch | safe | unsafe

align-content: baseline | center | end | flex-end | flex-start | 
  left | normal | right | space-between | space-evenly | start | 
  stretch | safe | unsafe

Tip: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties

Explicit grids: grid-template-columns & grid-template-rows

Next ➹

Explicit grids: `grid-template-columns` & `grid-template-rows`