Display (MDN)

• inline
• block
• inline-block
• table
• absolute
• relative
• flex
• grid

Flexbox

• Holy Grail
• Using CSS Flexible Boxes
• W3C Specification

(HTML)

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

(CSS)

.flex-container {
    display: flex | inline-flex;

    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap:   nowrap | wrap | wrap-reverse;

    flex-flow: <'flex-direction'> && <'flex-wrap'>

    align-items:     flex-start | flex-end | center | baseline | stretch;                     
    justify-content: flex-start | flex-end | center | space-between | space-around;           
    align-content:   flex-start | flex-end | center | space-between | space-around | stretch; 
}

.flex-item{
    order: <integer>;

    flex-grow:   <number>;        /* default 0    */
    flex-shrink: <number>;        /* default 1    */
    flex-basis:  <length> | auto; /* default auto */

    flex: [<'flex-grow'> && <'flex-shrink'>? && <'flex-basis'>?] | none;

    align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

Flex Basis

/* Specify <'width'> */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Definitions

• Parents:
  • flex & inline-flex
  • flex-direction
  • flex-wrap
  • align-items
  • justify-content
  • align-content
• Children:
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

CSS Grid Layout

• CSS Grid Layout (MDN)
• W3C Specification
• Chris House's Complete Guide
• Complete Guide (CSS Tricks)
• Codrops Reference

HTML:

<div class="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS:

.grid-container {

    display: grid | inline-grid | subgrid;

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

    grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer";

    grid-template: none | subgrid | <'grid-template-rows'> / <'grid-template-columns'>;

/************************************************************************************************************/

    justify-items: start | end | center | stretch;
    align-items:   start | end | center | stretch; /*horizontal alignment*/

    justify-content: start | end | center | stretch | space-around | space-between | space-evenly; /*vertical alignment*/
    align-content:   start | end | center | stretch | space-around | space-between | space-evenly; /* row spacing */

/************************************************************************************************************/

    grid-auto-columns: <track-size> ...;
    grid-auto-rows:    <track-size> ...;

    grid-auto-flow: row | column | row dense | column dense;

    grid: none | <'grid-template-rows'> / <'grid-template-columns'> | <'grid-auto-flow'> [<'grid-auto-rows'> [/<'grid-auto-columns'>]];

/************************************************************************************************************/

    grid-column-gap: <line-size>;
    grid-row-gap:    <line-size>;

    grid-gap: <'grid-row-gap'> <'grid-column-gap'>;

}

Terms:

• grid-template-rows:
• grid-template-columns:
• grid-template-areas:
• grid-auto-rows:
• grid-auto-columns:
• grid-auto-flow:
• grid-auto-columns:

display: grid | inline-grid | subgrid;

• grid
  • Renders the grid as a block element.
• inline-grid
  • Renders the grid as an inline element.
• subgrid
  • Not currently supported by any browsers.

grid-auto-flow: row | column | row dense | column dense;

• row
  • Tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary.
• column
  • Tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary.
• dense
  • Tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later.
  • Note that dense might cause your items to appear out of order.

grid: <grid-template-rows> / <grid-template-columns> or <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];

• none
  • Sets all sub-properties to their initial values.
• <grid-template-rows> / <grid-template-columns>
  • Sets grid-template-rows and grid-template-columns to the specified values, respectively, and all other sub-properties to their initial values.
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]
  • Accepts all the same values as grid-auto-flow, grid-auto-rows and grid-auto-columns, respectively.
  • If grid-auto-columns is omitted, it is set to the value specified for grid-auto-rows.
  • If both are omitted, they are set to their initial values.

Explicit Grid vs. Implicit Grid

The explicit grid is what we define using the relevant CSS grid properties, like grid-template-rows, grid-template-columns and grid-template-areas. But say you specified a grid with 2 rows and 3 columns, then placed an item outside this grid.

The browser will create an implicit grid to hold that item.

Grid Template Areas

/** Example  **/

.grid-container {
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer";
}

.item-a { grid-area: header; }
.item-b { grid-area: main; }
.item-c { grid-area: sidebar; }
.item-d { grid-area: footer; }

Using Named Grid Lines

HTML:

<div class="wrapper">
    <div class="box1"> One </div>
    <div class="box2"> Two </div>
    <div class="box3"> Three </div>
    <div class="box4"> Four </div>
</div>

CSS:

.wrapper {
    display: grid;
    grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
    grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

.box1 {
    grid-column-start: main-start;
    grid-row-start: main-start;
    grid-row-end: main-end;
}

.box2 {
    grid-column-start: content-end;
    grid-row-start: main-start;
    grid-row-end: content-end;
}

.box3 {
    grid-column-start: content-start;
    grid-row-start: main-start;
}

.box4 {
    grid-column-start: content-start;
    grid-column-end: main-end;
    grid-row-start: content-end;
}