Layout

Layout tools are one of the areas that have seen the most changes in recent years. First Flexbox came onto the scene, and then CSS Grid emerged as the most polyvalent and expressive way of handling CSS layouts.

It may take a little longer to master, which explains why a lot of users haven't actually used it, but it's certainly worth the effort!

The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.

Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.

The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience
overall
<1
1~2
2~5
5~10
10~20
>20
Flexbox
92.82%
84.14%
92.79%
94.63%
94.88%
95.43%
95.06%
Grid
54.87%
50.22%
55.69%
53.52%
53.46%
55.84%
60.47%
Multi-Column Layout
27.56%
10.57%
13.58%
21.49%
32.19%
43.8%
43.76%
Writing Modes
7.33%
4.41%
5.75%
6.67%
6.62%
9.01%
11.53%
Exclusions
6.33%
2.2%
5.02%
6.57%
7.42%
7.83%
8.94%
Difference from overall usage:
-20%-10%0+10%+20%

Grid

Completion Percentage: 99.38% (11247)
Completion Percentage: 99.38% (11247)
Percents%CountΣ
Have used it54.37%
Know what it is, but haven't used it43.21%
Never heard of it/Not sure what it is1.8%

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Flexbox

Completion Percentage: 99.68% (11281)
Completion Percentage: 99.68% (11281)
Percents%CountΣ
Have used it94.43%
Know what it is, but haven't used it4.64%
Never heard of it/Not sure what it is0.61%

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, 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.

Multi-Column Layout

Completion Percentage: 99.73% (11287)
Completion Percentage: 99.73% (11287)
Percents%CountΣ
Have used it30.86%
Know what it is, but haven't used it28.13%
Never heard of it/Not sure what it is40.74%

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

Writing Modes

Completion Percentage: 99.73% (11287)
Completion Percentage: 99.73% (11287)
Percents%CountΣ
Have used it7.35%
Know what it is, but haven't used it19.41%
Never heard of it/Not sure what it is72.97%

CSS Writing Modes is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts).

Exclusions

Completion Percentage: 99.67% (11280)
Completion Percentage: 99.67% (11280)
Percents%CountΣ
Have used it7.09%
Know what it is, but haven't used it14.3%
Never heard of it/Not sure what it is78.29%

An exclusion element is a block-level element which is not a float, and generates an exclusion box. An exclusion element establishes a new block formatting context (via Chen Hui Jing).

Learn CSS Layout and Animations

Video course teaching layout with CSS Grid, Flexbox and CSS animations in CodePen

Learn CSS Grids and Flexbox for Responsive Web Design

Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code.
Thanks to our partners for supporting us! Learn more.