Archive | grid

RSS feed for this section

Grid to Flex

Una Kravets shows how to make layouts in CSS Grid with flexbox fallbacks for browsers that don’t support those grid properties just yet. Una writes:

CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect…This site is a solution for you so you can start to progressively enhance without fear!

The site is a provides examples using common layouts and component patterns, including …

The post Grid to Flex appeared first on CSS-Tricks.

Grid to Flex

Una Kravets shows how to make layouts in CSS Grid with flexbox fallbacks for browsers that don’t support those grid properties just yet. Una writes:

CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect…This site is a solution for you so you can start to progressively enhance without fear!

The site is a provides examples using common layouts and component patterns, including …

The post Grid to Flex appeared first on CSS-Tricks.

Grid areas and the element that occupies them aren’t necessarily the same size.

That’s a good little thing to know about CSS grid.

I’m sure that is obvious to many of you, but I’m writing this because it was very much not obvious to me for far too long.

Let’s take a close look.

There are two players to get into your mind here:

  1. The grid area, as created by the parent element with display: grid;
  2. The element itself, like a <div>, that goes into that grid area.

For example, say we …


Grid areas and the element that occupies them aren’t necessarily the same size. is a post from CSS-Tricks

Grid areas and the element that occupies them aren’t necessarily the same size.

That’s a good little thing to know about CSS grid.

I’m sure that is obvious to many of you, but I’m writing this because it was very much not obvious to me for far too long.

Let’s take a close look.

There are two players to get into your mind here:

  1. The grid area, as created by the parent element with display: grid;
  2. The element itself, like a <div>, that goes into that grid area.

For example, say we …


Grid areas and the element that occupies them aren’t necessarily the same size. is a post from CSS-Tricks

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins

According to an article from A List Apart about CSS Grid, a “new era in digital design is dawning right now.” With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There’s an entirely new system available for creating layouts, especially with Grid. However, as with most web technologies, browser support is always something of an issue. Let’s look at how we can make the fundamental …


Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins is a post from CSS-Tricks

The Difference Between Explicit and Implicit Grids

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items.

This is all handled by the so called explicit and implicit grid.

All code samples in this post are accompanied by …


The Difference Between Explicit and Implicit Grids is a post from CSS-Tricks

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos.
I decided to share some of the stuff that was particularly interesting to me, with you.

Have fun!

Negative values lower than -1 may be used for grid-row-end and grid-column-end

In a lot of code examples and tutorials you will see that you can use grid-column-start:


A Collection of Interesting Facts about CSS Grid Layout is a post from CSS-Tricks

Naming Things is Only Getting Harder

I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment.

They’re not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows.

What caught me was the fact that I can name these lines. It’s not a requirement (you can use numbers), but the ability to name the grid lines is something we can do here. In fact, naming …


Naming Things is Only Getting Harder is a post from CSS-Tricks

How the minmax() Function Works

Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we’ve been experimenting with lately.

What’s especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts.

Direct Link to ArticlePermalink


How the minmax() Function Works is a post from CSS-Tricks

How the minmax() Function Works

Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we’ve been experimenting with lately.

What’s especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts.

Direct Link to ArticlePermalink


How the minmax() Function Works is a post from CSS-Tricks