CSS: Subgrids, Multi-column, & Writing Modes. 🥸
Tags: css, html, webdev, tutorial
Published: 2020-11-20 13:28:26

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:

{% post https://dev.to/vaibhavkhulbe/css-color-gamut-containment-344a %}

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.

---

![Daisy GIF](https://media.giphy.com/media/uk6hEhjjEkNCoKoh0R/giphy.gif)
<figcaption>Enjoy these daisies while you start reading this...</figcaption>

---

# ➡️ [Subgrids](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid) 

This is something which Firefox lovers are so proud of. Why? Because as of now, this feature is [only supported on Firefox](https://caniuse.com/css-subgrid). 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`](https://developer.mozilla.org/en-US/docs/Glossary/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:

```css
.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:

![Subgrid Firefox demo](https://dev-to-uploads.s3.amazonaws.com/i/q9sehhzk4xgrntgc5fax.png)
<figcaption>This is why the Firefox dev tool is so awesome, it shows you all the overlays and line numbers!</figcaption>

Subgrids are way cooler when you have multiple nested items: 

```css
.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:

![Subgrid example 2](https://dev-to-uploads.s3.amazonaws.com/i/vlw2l9iu5wd1ces60cpu.png)

#### 🤩 Some subgrid resources!

- [Why we need CSS subgrid](https://dev.to/kenbellows/why-we-need-css-subgrid-53mh) by Ken Bellows
- [Introduction to CSS Subgrid](https://medium.com/@trekinbami/introduction-to-css-subgrid-cbf21d982994) by Sam Pakvis
- [#FutureCSS - The CSS SUBGRID is Awesome!](https://youtu.be/5Z_JX-EhRJA) by DesignCourse

Onto the next topic...

# ➡️ [Multi-column layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns) 

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

![Multi layout column example](https://dev-to-uploads.s3.amazonaws.com/i/694tqg88k2cc8wpb1qu4.png)

Maybe you need a [newspaper layout](https://i.stack.imgur.com/O9pc4.jpg), a [magazine](https://visme.co/blog/wp-content/uploads/2018/03/How-Grids-Can-Help-You-Create-Professional-Looking-Designs-Column-Grid-magazine.png), an [e-book](https://www.kotobee.com/blog/wp-content/uploads/2017/04/reflowable.jpg), or an [infographic type layout](https://image.shutterstock.com/image-vector/vector-infographic-thin-line-design-260nw-1237157878.jpg), 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:

{% codepen https://codepen.io/rachelandrew/pen/aPRjzL default-tab=result %}

This uses the following 3 properties:

1. [`column-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap): this acts as the [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/) by Rachel Andrew.
- [Guide to Responsive-Friendly CSS Columns](https://css-tricks.com/guide-responsive-friendly-css-columns/) by Katy DeCorah
- [CSS Multi-Columns - Awesome Newspaper Style Layouts (NO Flexbox or Grid)](https://youtu.be/syG7ljxqzNg) by DesignCourse

Talking about some writing...

# ➡️ [CSS Writing Mode](https://developer.mozilla.org/en-US/docs/Web/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:

{% codepen https://codepen.io/jensimmons/pen/KNJgmP default-tab=result %}

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](https://www.smashingmagazine.com/2019/08/writing-modes-layout/) by Rachel Andrew
- [CSS Writing Modes](https://24ways.org/2016/css-writing-modes/) by Jen Simmons
- [writing-mode](https://css-tricks.com/author/robinrendle/) by Robin Rendle

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

---

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

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="und" dir="ltr">🙄 <a href="https://t.co/1G4L5SedDv">pic.twitter.com/1G4L5SedDv</a></p>&mdash; Sasha Rosenbaum (@DivineOps) <a href="https://twitter.com/DivineOps/status/1329244198009262082?ref_src=twsrc%5Etfw">November 19, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### 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](https://medium.com/@vaibhavkhulbe)'s my Medium profile.