CSS Layouts

Yevhen Isakov

Agenda

Basic layout terminology
Layout implementation
Flexible Box Layout
Grid Layout

Box Model

box-sizing

content-box vs border-box

See the Pen box-model by Maria (@mariatar) on CodePen.

Document flow

Document flow is the arrangement of page elements as defined by positioning statements and the order of html statements; that is, how the different elements take up space and arrange themselves around each other.

Block and inline elements

See the Pen static by Maria (@mariatar) on CodePen.

Inline-block elements

See the Pen inline-block-elements by Maria (@mariatar) on CodePen.

Positioning

position: static

See the Pen static by Maria (@mariatar) on CodePen.

The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.

position: relative

See the Pen relative by Maria (@mariatar) on CodePen.

position: absolute

See the Pen absolute #3 by Maria (@mariatar) on CodePen.

position: absolute

See the Pen absolute by Maria (@mariatar) on CodePen.

position: absolute

See the Pen absolute #2 by Maria (@mariatar) on CodePen.

position: fixed

See the Pen fixed by Maria (@mariatar) on CodePen.

Z-index

See the Pen without z-index by Maria (@mariatar) on CodePen.

See the Pen z-index by Maria (@mariatar) on CodePen.

See the Pen z-index #2 by Maria (@mariatar) on CodePen.

z-index notes

Element with non-static positioning always will be above static element.
Element with positive z-index always will be above element without it.
On the same level the last element will be the highest one.
Lower amount of z-index elements is better.
In most cases you actually do not need z-index.

What is layout?

Layout

General page blocks organization which defines structure of a page and positioning of its content.

Layout implementation

Tables

See the Pen oJyvyO by Maria (@mariatar) on CodePen.

See the Pen vvrBaB by Maria (@mariatar) on CodePen.

table-like display on <div> s

See the Pen PXaYEq by Maria (@mariatar) on CodePen.

Floats

See the Pen aPKoJK by Maria (@mariatar) on CodePen.

See the Pen roKByp by Maria (@mariatar) on CodePen.

See the Pen roKBMY by Maria (@mariatar) on CodePen.

See the Pen REJbWd by Maria (@mariatar) on CodePen.

See the Pen YdvKyd by Maria (@mariatar) on CodePen.

Float?

Just clear it

See the Pen clear-block by Maria (@mariatar) on CodePen.

See the Pen clear-block #2 by Maria (@mariatar) on CodePen.

Micro-clearfix hack

See the Pen micro-clear-fix by Maria (@mariatar) on CodePen.

But!

sooooo much unsolved troubles left in CSS...

See the Pen different size box by Maria (@mariatar) on CodePen.

Flexbox

Spec & Browser Support

CSS Flexible Box Layout Module Level 1

See the Pen flexbox by Maria (@mariatar) on CodePen.

Flex-direction

flex-direction: row/row-reverse

See the Pen ROW flex-direction by Maria (@mariatar) on CodePen.

flex-direction: column/column-reverse

See the Pen COLUMN flex-direction by Maria (@mariatar) on CodePen.

Flex-wrap

flex-wrap

See the Pen Flex-Wrap by Maria (@mariatar) on CodePen.

justify-content

See the Pen Flex justify-content by Maria (@mariatar) on CodePen.

Align-items

align-items

See the Pen Flex align-items by Maria (@mariatar) on CodePen.

Order

Custom order

See the Pen flex order by Maria (@mariatar) on CodePen.

Grid

Spec & Browser Support

CSS Grid Layout Module Level 1

Spec & Browser Support

CSS Grid Layout Module Level 2(SUBGRID DRAFT)

Basic grid terminology

display: grid & display: inline-grid

See the Pen grid-layout by Maria (@mariatar) on CodePen.

grid-template-columns & grid-template-rows

grid-area & grid-template-areas

See the Pen grid-template-areas by Maria (@mariatar) on CodePen.

grid-template

one to rule them all

See the Pen grid-template by Maria (@mariatar) on CodePen.

grid-column-gap + grid-row-gap = grid-gap

See the Pen grid-gap by Maria (@mariatar) on CodePen.

Aligning Content Along Row Axis

justify-self & justify-items

See the Pen Aligning Content Along Row Axis by Maria (@mariatar) on CodePen.

Aligning Content Along Column Axis

align-self & align-items

See the Pen Aligning Content Along Column Axis by Maria (@mariatar) on CodePen.

place-items

place-items: align-items justify-items;

See the Pen Aligning the Whole Grid with place-item by Maria (@mariatar) on CodePen.

Aligning the Whole Grid

justify-content & align-content

See the Pen Aligning the Whole Grid by Maria (@mariatar) on CodePen.

The order property in Grid Layout

See the Pen The order Property in Grid Layout by Maria (@mariatar) on CodePen.

explicit grid

set a grid by creating columns and rows with the grid-template-columns and grid-template-rows properties

See the Pen Explicit Grid by Maria (@mariatar) on CodePen.

implicit grid

defined using the grid-auto-rows, grid-auto-columns, and grid-auto-flow properties

See the Pen Implicit Grid by Maria (@mariatar) on CodePen.

Attention!

First of all, Flexbox is about positioining and alignment element within container

Much more powerful than floats & tables, but for different use

Summary

Grids + Flexbox

Thanks!

Yevhen Isakov