In the past, CSS has tied itself to physical dimensions and directions, physically mapping the placement of elements to the left, right and top and bottom. We
float an element
right, we use the positioning offset properties
right. We set margins, padding, and borders as
padding-left. These physical properties and values make sense if you are working in a horizontal, top to bottom, left to right writing mode and direction.
They make less sense if you use a vertical writing mode, whether for your entire layout or for some elements. In this article, I’m going to explain how CSS is changing to support writing modes, and in doing so, I’ll clear up some of the things that might confuse you about Flexbox and Grid.
When I first began working with CSS Grid and explaining the new specification to people, I noted that the
grid-area property could be used as a one-line shorthand for setting all four lines. Therefore, the three examples below would result in the same item placement. The first uses the longhand properties, the second specifies start and end lines for each dimension, and the third uses
grid-row: 1 / 3;
grid-column: 2 / 4;
grid-area: 1 / 2 / 3 / 4;
The order of the lines when we use
grid-area is as follows:
The first question I (and many people in my audiences) had was, “why don’t these follow the Top, Right, Bottom, Left order we are used to from everything else in CSS?” They actually go in the reverse order to those values: Top, Left, Bottom, Right! Is the CSS Working Group actively trying to make things difficult?
The answer is that these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in
grid-area makes complete sense if you had never encountered the existing way that we set these values in a shorthand. We set the two start lines first, then the two end lines.
This means that if we change the writing mode of our document to a vertical one, the position of a block remains relative to the writing mode of the document, rather than the physical properties of the screen. You can try this in the example below, switch the writing-mode value for our layout and see the entire grid rotate.
Knowing this fact about writing modes also explains why CSS Grid and Flexbox refer to
end lines rather than mapping the grid to the physical dimensions of top, right, bottom and left as we would use with absolute positioning. In the above example, the first item is positioned using
grid-area and line-based positioning.
grid-area: 1 / 2 / 3 / 4;
If we were to use the longhand this would look like this:
We set both start lines, block axis first, inline axis second then follow the same pattern for the end lines in each dimension. Whichever way the grid is laid out, the start and end lines remain relative to the grid and writing mode of the document.
Block And Inline Dimensions
I have already mentioned something which is key to understanding new layout, the concept of the Block and Inline dimensions. These terms are going to keep coming up as you work with new CSS. The two dimensions are reasonably easy to understand in the context of Grid Layout as we are always working with a block and an inline axis when working in Grid Layout, so I’ll use a Grid demo to explain.
The Block dimension corresponds to the order in which blocks are laid out on the page. If you think about a paragraph of text in English. Each paragraph is laid out one below the other, the direction in which these are laid out is the block dimension, and so in Grid Layout, this is the Block Axis.
In CSS Grid Layout the Block Axis is also referred to as the Row Axis, which is why the Block Axis properties are
The inline axis, therefore, runs across the block axis, in the direction that words lay out in a sentence. In English, that axis runs left to right. In Grid Layout, the Inline Axis is the Column Axis with the properties
If we change the writing mode of our example to
vertical-lr the writing mode is now vertical, which means that the block axis runs vertically and the inline axis along the lines (top to bottom).
So if we talk about the Block dimension, we are describing the direction in which paragraphs of text would lay out in normal document flow, the Inline dimension being the direction a sentence runs.
Once you become used to working with Block and Inline dimensions, start and end lines, the link to physical dimensions in the rest of CSS begins to feel awkward. There is, however, a specification which defines logical versions of all of the existing physical properties - The CSS Logical Properties and Values specification which is a First Public Working Draft. Currently the only browser with good support for these properties is Firefox, however understanding how they work can be a good way to think about new CSS, so let us take a look.
I have illustrated each section with CodePen examples, to see these working you will need to use Firefox!
The logical properties define a start and end property for the block and inline dimension. For height and width properties, we instead use
inline-size. We can also set
min-inline-size. If you are working in English, a horizontal top-to-bottom language then
block-size refers to the physical
height of the block on your screen,
inline-size the physical
width of the item. If you are working in a language where the blocks run vertically, then as you look at your screen
block-size will appear to control the
inline-size the height.
You can see this in action in the demo below. My block has a
block-size of 150 pixels and an
inline-size of 250 pixels. Change the
writing-mode property to see how the layout adjusts.
We then have properties to control borders which work in the same way. The physical properties for borders are:
These then have logical mappings which become a little verbose as longhands, but are:
In the following example, there are two blocks, the first using logical properties to set a
border-block-start-color of green, and a
border-inline-end-style of dotted. The second block uses the physical properties of
border-right. Change the writing-mode to see how these behave.
Margins And Padding
Margins and padding have similar longhands to our border properties, with the physical properties being:
These have logical properties as follows:
In this next example, I have set
padding-block-start on the first block, and
padding-top on the second, change the writing mode to see the difference when the Block and Inline axises are switched.
Another place where physical properties are used is when positioning things using the
position property. After setting
position: absolute or another value of
position other than the default of
static we then can position an item using offsets, either from the viewport or from a parent that has created a new positioning context.
The offset physical properties are:
Following the pattern of our other logical properties we then have:
Try these out in the example below. The box with a border has
position: relative and the small purple square
position: absolute. In the physical example the square is positioned
top: 50px and
right: 20px. The logical version has
offset-block-start: 50px and
Another place where we are accustomed to using physical dimensions is when we float or clear things. For
clear we have some logical versions of the
In the demo, I am floating the purple block in the logical version
inline-start. I’m also using logical properties for the margin; this ensures that the margin always comes after the block, and before the content which wraps around it. By selecting the
vertical-rl value in the drop-down, you can see how in the physical example the margin ends up on the right of the block, rather than being applied in the
There are also
end values for
text-align. Aligning something to start will align it to the start of the inline axis, to
end to the end of the inline axis, irregardless of whether the writing mode is horizontal or vertical.
Using Logical Properties And Values Today
As already mentioned, there is little browser support at the moment for logical properties and values. However, if you want to start working with them now, and option would be to write your CSS using them and then use a PostCSS plugin to convert the logical properties and values to their physical counterparts. This plugin by Jonathan Neal covers all of the properties and values that I have described in this article.
You can also help to encourage adoption by browser vendors of these properties by starring the Chrome bug, and upvoting these on the Edge Developer Feedback site.
Even if you decide not to use these properties now, understanding how they work is a key piece of understanding for working with a new layout. Describing your Grid or Flex layout as having start and end lines, thinking about block and inline dimensions, these things will make it much easier to understand how layout works.
- The MDN Web Docs have all of the logical properties and values listed with additional examples.
- CSS Grid, logical values and Writing Modes, MDN
- CSS Writing Modes, Jen Simmons, 24 ways