How browsers render stuff

(and lay them out)

Positioning schemes

Basic terminology

The container-child relationship

“Grid works from the container in, other layout methods start with the item”
—Rachel Andrew

Layout technique: inline-block

Layout technique: float

Layout technique: flex

“Grid is the only layout technique that establishes a relationship between rows and columns of grid items.”

The most basic grid

Defining a grid

Using grid-template-rows and grid-template-columns

<div class="grid1">
  <div class="grid1__item">
    <p>Item A</p>
  </div>
  <div class="grid1__item">
    <p>Item B</p>
  </div>
  <div class="grid1__item">
    <p>Item C</p>
  </div>
  <div class="grid1__item">
    <p>Item D</p>
  </div>
  <div class="grid1__item">
    <p>Item E</p>
  </div>
  <div class="grid1__item">
    <p>Item F</p>
  </div>
</div>

Auto-placement of grid items

(and the implicit grid)

The repeat() function

To specify a large number of columns or rows that follow a similar pattern

auto-fill versus auto-fit

Letting the browser figure out the math

grid-auto-row and grid-auto-column

Controlling the size of implicit rows/columns

The grid-auto-flow property

Adjusting the direction and density of grid items

More ways to size grid rows and columns

The fr unit

Represents a fraction of the free space in the grid container.

Fluid CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 3fr 2fr);
}

The minmax() function

Defines a size range for columns or rows in the grid.

Responsive grid without media queries

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

Content-based sizing

Using the min-content, max-content and fit-content properties

Simple responsive grid

Manual placement of grid items

(and the explicit grid)

Line-based placement

Using grid-row-start, grid-row-end and grid-column-start, grid-column-end

Some Grid shorthands

(because brevity is a virtue…maybe)

Using the grid-row and grid-column shorthands

By default, grid items will take up the space of 1 grid cell

The span keyword

Content can span multiple grid cells

Using the grid-area shorthand

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>

Assigning names to grid things

Naming grid lines

Naming grid areas

Using grid-template-areas and grid-area

Making sense of box alignment

Property	Axis	Aligns	Applies to
justify-content	main/inline	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
align-content	cross/block
justify-self	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
align-self	cross/block		absolutely-positioned boxes, flex items and grid items
justify-items	inline	items inside box (controls child items)	block containers and grid containers
align-items	cross/block		flex-containers and grid-containers

Source: CSS Box Alignment Module Level 3

justify/align-content

content-distribution properties

justify/align-self

self-alignment properties

justify/align-items

defaults for justify/align-self

Grid versus Flexbox?

Wrong question

Grid AND Flexbox

Figuring out flexbox

Flex axes

Flex lines

Flex directions

What is the most common mistake developers make when using flexbox?

Not using the flex shorthand

“Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.”
—CSS Flexible Box Layout Module Level 1

Basic flex keyword values

“When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.”
—CSS Flexible Box Layout Module Level 1

The flex syntax

/* One value, unitless number: flex-grow */
flex: 3;

/* One value, width/height: flex-basis */
flex: 200px;
flex: 45em;

/* Two values: flex-grow | flex-basis */
flex: 1 25ch;

/* Two values: flex-grow | flex-shrink */
flex: 2 1;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 3 30%;

Aligning with auto margins

Defining “auto” by Elika Etemad (AKA fantasai)

Aligning along the main axis

justify-content helps distribute extra free space left over after flexible lengths and auto margins are resolved.

Aligning along the cross axis

align-items sets the default alignment for all flex items along the cross axis of the flex line. Over-ridable by align-self.

Packing flex lines

align-content aligns flex lines within the flex container if there is extra space along the cross-axis.

Responsive configuration page

Is it safe to use CSS grid in production?

Falling back with style

Using @supports AKA feature queries

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

Diagonal header

See the Pen The Critical Request header by Chen Hui Jing (@huijing) on CodePen.

How we can improve design using grids?

and

What are some of the amazing techniques you've seen that use CSS Grid?

Overlap

Vertical whitespace

CSS grid showcase

CSS grid showcase

Artist profile page