As websites evolved from simple documents into complex, interactive applications, techniques for document layout like floats are not enough, new layout systems like Grid, Flexbox, Multi-Column emerged.
Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.
These CSS layouts are mainly controlled by following CSS properties: float, position, display, and writing-mode.
CSS Writing Modes defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations.
A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties. Writing systems typically have one or two native writing modes.
Unlike languages that use the Latin script which are primarily laid out horizontally, Chinese and Japanese lines are ordered either right to left or top to bottom, while for Mongolian and Manchu lines are ordered left to right.
More info: CSS writing-mode property, Writing Modes and CSS Layout
CSS takes a source document, organized as a tree of elements and text nodes, and renders it onto a canvas (such as your screen, a piece of paper, or an audio stream).
To do this, it generates an intermediary structure, the box tree, which represents the formatting structure of the rendered document. Then, for each element, CSS generates zero or more boxes as specified by that element’s display property.
The display property specifies the display behavior (the type of rendering box) of an element. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
By default, block-level elements (div, h1-h6, p, form, etc.) are laid out in the block flow direction, based on the parent’s writing mode (initial: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. In English therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically.
Inline elements (span, a, img, etc.) behave differently — they don’t appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn’t space, then the overflowing text or elements will move down to a new line.
More info: MDN CSS Box-Model, MDN CSS Display, CSS Display Module Level 3
This is a single-axis–oriented layout system, a flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.
In the flex layout model, the children of a flex container can be laid out in any direction (exposed through the flex-direction, flex-wrap, and order properties), and can “flex” their sizes (flex-grow, flex-shrink, flex-basis), either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated (justify-content, align-items, align-content).
More info: CSS Flexible Box Layout Module Level 1, A Complete Guide to Flexbox, Can I use Flexbox
This is a two-dimensional grid-based layout system, a grid container is the box generated by an element with a computed display of grid or inline-grid, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.
You can define columns and rows on your grid using the grid-template-rows and grid-template-columns properties.
Loosely speaking, the grid items of a grid container are boxes representing its in-flow contents. A grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
More info: CSS Grid Layout Module Level 1, A Complete Guide to CSS Grid, Can I Use CSS Grid Layout
Floats have commonly been used to create entire web site layouts featuring multiple columns of information floated so they sit alongside one another. There are newer, better layout techniques available and so use of floats in this way should be regarded as a legacy technique.
This layout uses two CSS properties: float and clear:
float: when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.clear: sets whether an element must be moved below (cleared) floating elements that precede it, applies to floating and non-floating elements.As float implies the use of the block layout, it modifies the computed value of the display values.
More info: All About Floats
The CSS layout algorithms, by default, size and position boxes in relation to each other so that nothing overlaps.
CSS Positioned Layout is a module of CSS that defines how to position elements on the page, including following CSS properties:
position: sets how an element is positioned in a document.
static: element displays on the page in the order it appeared in the document. Top, right, bottom, left, and z-index properties have no effect.relative: similar to static but able to be offset by top, right, bottom, left, and z-index properties.absolute: element positioned relative to its first non-static ancestor element. Similar to relative in that it may be offset by top, right, bottom, left, and z-index properties.fixed: similar to absolute, but positioned relative to the browser window. Scrolling will not move this element.sticky: element is positioned relative until a specified offset position is met by scrolling, then the element is positioned fixed in that position on the scrolling element.z-index: sets the z-order of a positioned element and its descendants or flex items, overlapping elements with a larger z-index cover those with a smaller one.
top, right, bottom, left: specify the vertical/horizontal position of a positioned element.
More info: Faux Absolute Positioning
A table is the box generated by an element with a computed display of table or inline-table, it has a complex internal structure, with several different roles that their children and descendants can fill.
display: table /* <table> */
display: table-cell /* <td> */
display: table-row /* <tr> */
display: table-column /* <col> */
display: table-column-group /* <colgroup> */
display: table-footer-group /* <tfoot> */
display: table-header-group /* <thead> */Tables are far from clean code and don’t bring anything semantic to the content unless you’re dealing with actual tabular data. And if you’ve happened to inherit the maintenance of a website that has poor readability, it’s a nightmare.
Using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.
More info: Complete Guide to Table Element
Multiple-column Layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper.
Other layout methods in CSS, when applied to a parent element, change the display properties of the direct children. For example if a three column grid layout is created, the direct children of the grid container become grid items and are placed into the column tracks, one element per cell with additional rows created as needed.
The child elements of a multi-column container however continue in normal flow, that flow is arranged into a number of columns. These columns have a flexible inline size, and therefore respond to available space by changing the size or number of columns displayed.
This layout uses following CSS properties:
column-width
column-count
columns
column-rule-color
column-rule-style
column-rule-width
column-rule
column-span
column-fill
column-gapMore info: CSS Multi-column Layout Module Level 1, When And How To Use CSS Multi-Column Layout
You can achieve a design with different CSS layout systems which are mainly controlled by float, position, display and other supporting CSS properties.
More info: Introduction to CSS layout, Getting started with CSS layout, Legacy layout methods