Skip to content

The State of CSS 2021

[en-US] general.back_to_intro

Layout

How do you position elements on the screen?

CSS Grid

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

Subgrid

Customize Data
Level 2 of the CSS Grid Layout specification includes a subgrid value for grid-template-columns and grid-template-rows. This guide details what subgrid does, and gives some use cases and design patterns that are solved by the feature.
Never heard of it
Know about it
Have used it
2020
2021

Flexbox

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

CSS Multi-Column

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

CSS Writing Modes

Customize Data
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).
Never heard of it
Know about it
Have used it
2019
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: The CSS Paint API

The Paint API allows us to create images programmatically, to use in our CSS. It unlocks a whole world of creativity, and I am very excited about it!

We asked members of the CSS community to share their “pick of the year”

George Francis

Developer, writer, and generative artist.

position: sticky

Customize Data
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
Never heard of it
Know about it
Have used it
2020
2021

Logical Properties

Customize Data
CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
Never heard of it
Know about it
Have used it
2020
2021

aspect-ratio

Customize Data
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
Never heard of it
Know about it
Have used it
2020
2021
💡

The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API.

content-visibility

Customize Data
Never heard of it
Know about it
Have used it
2020
2021

Gap property for flexbox

Customize Data
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
Never heard of it
Know about it
Have used it
2021

Break rules

Customize Data
The break-before CSS property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.
Never heard of it
Know about it
Have used it
2021

Container Queries

Customize Data
When creating a responsive design you often use a media query to change the document layout based on the size of the viewport.
Never heard of it
Know about it
Have used it
2021

Recommended Resources

CSS Grid & Flexbox for Responsive Layouts, v2

CSS Grid & Flexbox for Responsive Layouts, v2

Learn the essential CSS layout techniques for building responsive, beautiful web applications. You'll get hands-on practice using CSS Grid for two-dimensional, grid-based layouts and Flexbox for styling one-directional flow.
Thanks to our partners for supporting us! Learn more.