10 Modern Layouts in 1 Line of CSS

Already making rounds on Twitter last week, but now the video’s been released too:

In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.

Ten modern layouts in one line of CSS →
1-Line Layouts Demo Site →

CSS Grid Layout Module Level 2: Masonry Layout

UPDATE 2020.10.22: Masonry Layout has officially become part of the CSS Grid Module Level 3 spec!

A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal.

🤔 Masonry Layout?

Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesn’t have fixed height rows. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

It became easy to implement thanks to the Masonry JavaScript Library.

~

Thankfully discussions to natively implement Masonry in CSS haven’t stopped and back in January it kinda settled on this syntax:

.masonry {
  display: grid;
  grid-gap: 1em;
  grid: masonry / repeat(auto-fit, minmax(20em, 1fr));
}

☝️ That’s grid-template-rows being set to masonry there, and grid-template-columns to the already familiar repeat(auto-fit, minmax(20em, 1fr))

Knowing that Tab Atkins – author of CSS Grid Layout Level 1 – responded with I’m liking this quite a bit! was a good sign. What’s even better is that Firefox Nightly (version 77a1) has implemented it by now, behind a flag.

👨‍🔬 Do note that this Masonry addition is still a proposal and is considered to be highly experimental at the time of writing. The syntax is still being discussed upon and is NOT final at all. Heck, you can’t even find a mention of Masonry in the CSS Grid Module Level 2 Draft!

~

To enable the experimental Masonry implementation in Firefox Nightly go to about:config and set layout.css.grid-template-masonry-value.enabled to true.

Once enabled the following pen should show a nice Masonry Layout:

See the Pen CSS Masonry Layout (FF Nightly – Feature Flag) by Miriam Suzanne (@mirisuzanne) on CodePen.

Yes, I’m really excited about this one … let’s hope it sticks!

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Margin considered harmful

Max Stoiber:

We should ban margin from our components. Hear me out.

By banning margin from all components you have to build more reusable and encapsulated components.

I think the message is a bit more nuanced though: margins of course still are allowed and used throughout your CSS, but if you want to allow a developer to tweak the spacing used inside your component provide a prop to let them do so.

However, don’t let them set a direct size (e.g. 1em), but give them several options to choose from. Think of Tailwind’s .m-0, .m-1, .m-2, etc. to tweak the margin itself, or Bootstrap’s .btn-sm and .btn-lg to make buttons small or big.

Margin considered harmful →

Crafting a Cutout Collage Layout with CSS Grid and clip-path

On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say:

What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.

See the Pen Magazine Cutout by Bramus (@bramus) on CodePen.

I’ve only cut out a few parts, but you get the idea. The parallax part as seen in the original is left as an exercise to you, dear reader 😛

🚧 A big help in creating these cutouts was the Shape Path Editor which you can find in Firefox’ DevTools. Without it such a task would have been really difficult.

“Designing Intrinsic Layouts” by Jen Simmons

Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past.

In this hour-long talk captured live at An Event Apart DC 2019, Jen Simmons walks you through the thinking process of creating accessible & reusable page and component layouts.

Her YouTube Channel Layout Land, which is mentioned at the start, is worth a closer look if you’re looking for more CSS Grid/Flexbox/etc. related videos.

“Designing Intrinsic Layouts” by Jen Simmons – An Event Apart →

Understanding positioning in CSS

Chen Hui Jing:

Everything on the web is a box.

The positioning algorithms used to calculate the position of a box on the page is determined by the position and float properties. I’ll try my best to explain this in a way that makes sense. But first, let’s look at them individually.

Good introductory post to the values for CSS’s position. Also touches Logical box offset values

Understanding positioning in CSS →

Print to CSS – Magazine layouts recreated with CSS Grid

Just like Jules Forrest before, Dan Davies has recreated some magazine layouts using CSS Grid:

I’m a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to merge the two things together and recreate some of the print work that I’ve seen and liked.

I also see a hint of position: sticky; here and there 🙂

Print to CSS →

RTL Styling 101

Ahmad Shadeed created this extensive RTL reference.

Over 292 million people around the world speak Arabic as their first language. Arabic is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles.

Be sure to read the section on CSS Logical Properties too, as that will simplify things in modern browsers.

RTL Styling 101 →

Fullwidth Content Strips and CSS Subgrid = ❤️

When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS

💁‍♂️ Alternatively you can also use this .full-bleed utility class

To lay out the content inside those fullwidth strips, with respect to the main grid, CSS Subgrid comes in handy

In this article, we’ll be exploring one specific use case: augmenting a Grid-infused article layout. This article layout will allow for certain sections of content to break out into full-width areas.

.article-body {
    display: grid;
    grid-template-columns: [fullWidth-start] 1rem 
                           [left-start]      1fr 
                           [article-start right-start] minmax(20ch, 80ch) 
                           [article-end left-end] 1fr 
                           [right-end] 1rem [fullWidth-end];
}

.article-body .full-width {
    display: grid;
    grid-template-columns: subgrid;
}

.article-body .full-width .right {
    grid-column: right;
}

With this addition, children of .full-width can target columns of .article-body itself.

Use CSS Subgrid to layout full-width content stripes in an article template →

Flexbox Holy Albatross with CSS Grid

In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid.

ℹ️ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical):

There’s no intermediary state where a few items get wrap to new lines.

The short answer: yes. The long answer: yes, but only in browsers that support the CSS min() function, which is only Safari at the time of writing.

.selector {
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            min(
                calc(1024px * 999 - 100% * 999),
                100%
            ),
            1fr
        )
    );
}

Flexbox Albatross with Grids (CodePen) →