Skip to Content
FrontendHTML 5Layouts

Layouts

Floating - using float and clear

The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

  • left - The element floats to the left of its container
  • right - The element floats to the right of its container
  • none (default) - The element does not float (will be displayed just where it occurs in the text)
  • inherit - The element inherits the float value of its parent
🚫
Caution

In its simplest use, the float property can be used to wrap text around images. It’s only purpose in modern CSS is to wrap inline content in specific edge cases. There are better alternatives for other cases.

Multi column layout

Used for magazine, newspaper and articles. Defines the multi column layout on parent level and child content just flows and gets splitted into columns automatically.

With flex the content have to be manually split into columns. With multi column layout the content is divided automatically.

Properties:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Flexbox

Used for one dimension containers. Either horizontal or vertical.

Flex container properties:

  • flex-direction - row | row-reverse | column | column-reverse
  • flex-wrap - nowrap | wrap | wrap-reverse
  • flex-flow - shorthand for the flex-direction and flex-wrap
  • justify-content (main axis) - flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe
  • align-items (cross axis) - stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;
  • align-content (cross axis) - flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe;
  • gap, row-gap, column-gap
💡
Tip

align-content is the same as justify-content but for the cross axis.

Flex items properties:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis - initial size of a flex item before any space is distributed via flex-grow or taken away via flex-shrink.
  • flex
  • align-self
💡
Tip
  • flex-basis overrides width/height in a Flexbox context.
  • Use flex-basis: 0 if you want equal growth from scratch (common in flex: 1 layouts).
  • Use flex-basis: auto if you want items to start with their content size (common in flex: initial).
.item {
  flex-basis: 200px; /* This item wants to be 200px wide (or tall in a column layout), but I’m flexible if needed. */
}

Grid

Used for two dimensional layouts where control over both the rows and columns is needed.

Terms:

  • Grid container
  • Grid item - the children of the grid container
  • Grid line - the lines between the grid tracks
  • Grid track - whole row or column
  • Grid area - can have one or more grid cells
  • Grid cell

Breakpoints

Last updated on
FormsResponsiveness