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

Exciting Things on the Horizon For CSS Layout

Link

Constrained CSS grids without `max-width`

Article

A Grid of Logos in Squares

Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the big fancy companies that use some product. Putting the logos into squares is a decent way of handling it, as it forces some clean structure … Read article “A Grid of Logos in Squares”

Video

#179: A Grid of Squares

Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this video, we’ll look at doing that because we want to put a logo, centered, in each square.

One of the final demos:

CodePen Embed Fallback… Read article “#179: A Grid of Squares”
Article

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.… Read article “4 CSS Grid Properties (and One Value) for Most of Your Layout Needs”

Link

Careful with Nested `display: grid; height: 100%;`

Article

Responsive Grid Magazine Layout in Just 20 Lines of CSS

I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar.

The easy part was grabbing a list of posts with excerpts from our favorite RSS feeds. For that, we used a WordPress plugin, Feedzy lite, which can aggregate multiple feeds into a single time-ordered list — perfect … Read article “Responsive Grid Magazine Layout in Just 20 Lines of CSS”

Article

The Auto-Flowing Powers of Grid’s Dense Keyword

Let’s say we’re working on the homepage of a news website. You’re probably used to seeing some card-based content in a grid layout, right? Here’s a classic example, The New York Times:

Yeah, something like that.… Read article “The Auto-Flowing Powers of Grid’s Dense Keyword”

Article

How to Stack Elements in CSS

If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let’s go over two different ways to accomplish this, one with the position property and one with CSS Grid.… Read article “How to Stack Elements in CSS”

Article

New Year, New Job? Let’s Make a Grid-Powered Resume!

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during the new year!… Read article “New Year, New Job? Let’s Make a Grid-Powered Resume!”