Skip to main content
CSS is fun and cool and I like it.

Articles Tagged layout

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
30 Articles
{
,

}
Article

A Lightweight Masonry Solution

Avatar of Ana Tudor
Author
Ana Tudor
3 Comments
Join Conversation

Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how this new proposed CSS feature works.

Support is obviously limited to Firefox for now (and, even there, only behind a flag), but it still offered … Read article “A Lightweight Masonry Solution”

Link

10 modern layouts in 1 line of CSS

Avatar of Chris Coyier
Author
Chris Coyier
3 Comments
Join Conversation

Una doing an amazing job of showing just how (dare I say it?) easy CSS layout has gotten. There is plenty to learn, but what you learn makes sense, and once you have, it’s quite empowering. … Read article “10 modern layouts in 1 line of CSS”

Link

Styling Layout Wrappers In CSS

Avatar of Geoff Graham
Shared by
Geoff Graham

Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things.

Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common — especially when establishing grid layouts and boundaries for the elements inside them — that it’s easy to take them for granted and reach for them without stepping back … Read article “Styling Layout Wrappers In CSS”

Our Notes   /   Read at ishadeed.com
Link

Overlapping Header with CSS Grid

Avatar of Chris Coyier
Shared by
Chris Coyier

Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:

Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the body gets a margin-top: -50px or whatever the design calls for.

If you match the margin and padding with a situation like this, it’s not … Read article “Overlapping Header with CSS Grid”

Our Notes   /   Read at snook.ca
Link

Exciting Things on the Horizon For CSS Layout

Avatar of Chris Coyier
Shared by
Chris Coyier

Michelle Barker notes that it’s been a heck of a week for us CSS layout nerds.

  1. Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.
  2. Firefox supports gap for display: flex, which is great, and now Chrome is getting that too.
  3. Firefox is trying out an idea for masonry layout.
… Read article “Exciting Things on the Horizon For CSS Layout”
Our Notes   /   Read at css-irl.info
Sponsored Link

Making Things Better: Redefining the Technical Possibilities of CSS

Robin recently lamented the common complaint that CSS is frustrating. There are misconceptions about what it is and what it does. There are debates about what kind of language it is. There are even different views on where it should be written.

Rachel Andrew has a new talk from An Event Apart DC 2019 available that walks us back; back to the roots of the issues we used to have with CSS and the “hacks” we used to overcome … Read article “Making Things Better: Redefining the Technical Possibilities of CSS”

Our Notes   /   Read at aneventapart.com
Link

Same HTML, Different CSS

Avatar of Chris Coyier
Shared by
Chris Coyier

Ahmad Shadeed covers the idea of a card component that has a fixed set of semantic HTML with some BEMy classes on it. There is a title, author, image, and tags. Then he redesigns the card into five totally different designs without touching any of the HTML just the CSS.

If this is an ah-ha moment for you, awesome! It might be worth knowing that this exact concept essentially excited an entire generation of front-end developers, in no small part … Read article “Same HTML, Different CSS”

Our Notes   /   Read at ishadeed.com
Link

Helping Browsers Optimize With The CSS Contain Property

Avatar of Chris Coyier
Shared by
Chris Coyier

There is a growing number of things that we have to do to help the browser achieve for peak performance.

  • Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors.
  • Regular images have always had width and height presentational attributes, which have always been somewhat useful and are now really useful.
  • The will-change property in
… Read article “Helping Browsers Optimize With The CSS Contain Property”
Our Notes   /   Read at www.smashingmagazine.com
Article

Print-Inspired Layout on the Web

Avatar of Chris Coyier
Author
Chris Coyier

I always love seeing people get inspired by print design and trying to port it over to the web. There is a much deeper history of interesting print work to draw from, and still a ton of modern work happening that eclipses most digital design work today. The web is fully capable of bold, interesting designs, yet we see it all-too-rarely.

Just lately, we’ve seen a little surge of interest…… Read article “Print-Inspired Layout on the Web”

Article

Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements

Avatar of Marco Troost
Author
Marco Troost

I recently had to craft a newspaper-like design that featured multiple row and column spans with divider lines in between them. Take a look at the mockup graphic here and see if it makes you sweat at all. If you’re like me, you have been around a while and know just how difficult this would have been with old layout techniques.… Read article “Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements”