Layout
How do you position elements on the screen?
GridCompletion percentage: 94.9% (10906)Completion percentage: 94.9% (10906)
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.
2019
2020
| Have used it | |
| Know about it | |
| Never heard of it |
SubgridCompletion percentage: 94.5% (10859)Completion percentage: 94.5% (10859)
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.
2020
| Have used it | |
| Know about it | |
| Never heard of it |
FlexboxCompletion percentage: 94.6% (10871)Completion percentage: 94.6% (10871)
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.
2019
2020
| Have used it | |
| Know about it | |
| Never heard of it |
Multi-Column LayoutCompletion percentage: 94.3% (10837)Completion percentage: 94.3% (10837)
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.
2019
2020
| Have used it | |
| Know about it | |
| Never heard of it |
Writing ModesCompletion percentage: 94.5% (10855)Completion percentage: 94.5% (10855)
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).
2019
2020
| Have used it | |
| Know about it | |
| Never heard of it |
My 2020 Pick: Container Queries
Container queries are a long-time awaited feature for us, and I’m thrilled that the Chrome team is working on support for it natively!
Ahmad Shadeed
ExclusionsCompletion percentage: 94.2% (10830)Completion percentage: 94.2% (10830)
2019
2020
| Have used it | |
| Know about it | |
| Never heard of it |
CSS position:stickyCompletion percentage: 94.4% (10853)Completion percentage: 94.4% (10853)
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.
2020
| Have used it | |
| Know about it | |
| Never heard of it |
CSS Logical PropertiesCompletion percentage: 94.3% (10837)Completion percentage: 94.3% (10837)
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.
2020
| Have used it | |
| Know about it | |
| Never heard of it |
CSS property: aspect-ratioCompletion percentage: 94.5% (10855)Completion percentage: 94.5% (10855)
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.
2020
| Have used it | |
| Know about it | |
| Never heard of it |
CSS content-visibilityCompletion percentage: 94.5% (10865)Completion percentage: 94.5% (10865)
2020
| Have used it | |
| Know about it | |
| Never heard of it |