CSS: Subgrids, Multi-column, & Writing Modes. 🥸

Three cool topics to cover here! If you're totally new to the Cascading Style Sheets (CSS) this might not be the right article to read!

But wait! If you really want to dive into some of the un-common (or not-so-famous) terms and practices in the frontend development world, then you're more than welcome :)

Previously I tried to cover CSS color gamut and containment pattern, you can read all about it here:

CSS: Color gamut & Containment. 🌈

Vaibhav Khulbe ・ Oct 23 '20

#css #html #webdev #tutorial

And now, we're into subgrids, multi-column layouts and writing modes so let's talk a bit about each of them briefly in this article.

---

Enjoy these daisies while you start reading this...

---

➡️ Subgrids

This is something which Firefox lovers are so proud of. Why? Because as of now, this feature is only supported on Firefox. Not to worry, let's take a look at what it actually is.

CSS Subgrid allows a grid-item with its own grid to align in one or both dimensions with its parent grid.

Yeah, we're dealing with display: grid but here it's nested! When you add this code to a grid container, we see that only its direct children elements become the actual grid items which are then placed on the newly created grid.

Now, these grids are usually independent of their parent grid, so naturally, they won't take the grid track sizing. But if you set grid-template-columns: subgrid or even grid-template-rows: subgrid, instead of creating a new grid track, listing it here on the nested grid, it uses the tracks defined on the parent.

Let's take a simple example:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto auto;
}

.item {
    grid-column: 2 / 6;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

This example has 6 column and 3-row tracks defined by the grid-template property. The nested grid is a grid item on the parent .grid spanning from column 2 to 6, the same goes for the row which goes from row line 1 to 3.

Now, as we used the value of subgrid on grid-template-columns and grid-template-rows of the .item, this means that the nested row now has 4-column with 2-row tracks. These values come from the same sizing defined on the parent. With this defined, we can assume that any change to the track sizing on the parent grid will be followed by the nested grid.

Here's how it looks on the Firefox browser with dev tools in action:

This is why the Firefox dev tool is so awesome, it shows you all the overlays and line numbers!

Subgrids are way cooler when you have multiple nested items:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto auto;
}

.item {
    grid-column: 2 / 6;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.subitem {
    grid-column: 2 / 4;
    grid-row: 2;
}

Here, we got the .subitem which is nested inside the .item class. This yields the following output:

🤩 Some subgrid resources!

• Why we need CSS subgrid by Ken Bellows
• Introduction to CSS Subgrid by Sam Pakvis
• #FutureCSS - The CSS SUBGRID is Awesome! by DesignCourse

Onto the next topic...

➡️ Multi-column layout

Working on a website layout where you need to display text like this?:

Maybe you need a newspaper layout, a magazine, an e-book, or an infographic type layout, you're in for the multi-column mode of CSS...

The CSS Multi-column Layout adds support for multiple-column layouts. With this, you can establish the number of columns needed for a layout along with how the content inside each column should flow.

You can control the gap size between the columns, the dividers in between the columns, fragmenting the content, and much more.

Check-out the following example:

This uses the following 3 properties:

1. column-count: this is used to break the content inside the element into a number of specified columns. The higher the count, the more number of columns it produces.

2. column-gap: this acts as the gap (formerly grid-gap) property of the columns. The value you give here will add that much amount of gutter gap between the columns.

3. column-rule: acts much like the border between the two columns. So you have the freedom to add all the styling options of the border like solid 2px red etc.

🤩 Some multi-col resources!

• When And How To Use CSS Multi-Column Layout by Rachel Andrew.
• Guide to Responsive-Friendly CSS Columns by Katy DeCorah
• CSS Multi-Columns - Awesome Newspaper Style Layouts (NO Flexbox or Grid) by DesignCourse

Talking about some writing...

➡️ CSS Writing Mode

Want a document to show from top to bottom instead of the usual flow of left to right? What do you think is the CSS behind the Arabic words when you visit a webpage in that language? Most probably, you want to fiddle around with the writing modes.

The CSS Writing Mode property sets the layout of the text as well as the direction of the content block along which the entire web document flows.

Take a look at this CodePen demo:

You might find the text "Octavia Butler" written in an unusual style. This is all done via the writing mode. Let's take a look at different values we can provide to make the text go in unusual directions:

1. horizontal-tb: If your document text is in ltr scripts like English or Spanish, then the content will flow horizontally from left to right as we commonly see. If it's in rtl script like Arabic or Hebrew, then it reverses, now it will for from right to left.

2. vertical-rl: Use it for the vertical top to bottom flow. Also, the next line is positioned to the left of the previous line. For rtl, this flows bottom to top and the next line will be towards the right of the previous one.

3. vertical-lr: This is 50% similar to the vertical-rl approach, the only difference being in the flow of the next line, for rtl it's vertically from bottom to top and vice-versa for ltr.

🤩 Some writing mode resources!

• Writing Modes And CSS Layout by Rachel Andrew
• CSS Writing Modes by Jen Simmons
• writing-mode by Robin Rendle

Okay, now we've reached the end...

---

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

---

🙄 pic.twitter.com/1G4L5SedDv

— Sasha Rosenbaum (@DivineOps) November 19, 2020

---

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.