grid assignment design

A Complete Guide to CSS Grid

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

Table of contents

• Introduction
• Important Terminology
• Grid Properties

Special Units & Functions

• Fluid Columns Snippet

Get the poster!

Reference this guide a lot? Here’s a high-res image you can print!

Introduction to CSS Grid

CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS has always been used to layout our web pages, but it’s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox is also a very great layout tool, but its one-directional flow has different use cases — and they actually work together quite well! Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

The intention of this guide is to present the Grid concepts as they exist in the latest version of the specification. So I won’t be covering the out-of-date Internet Explorer syntax (even though you can absolutely use Grid in IE 11 ) or other historical hacks.

CSS Grid basics

As of March 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. Internet Explorer 10 and 11 on the other hand support it, but it’s an old implementation with an outdated syntax. The time to build with grid is now!

To get started you have to define a container element as a grid with  display: grid , set the column and row sizes with  grid-template-columns  and  grid-template-rows , and then place its child elements into the grid with  grid-column  and  grid-row . Similarly to flexbox, the source order of the grid items doesn’t matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

Important CSS Grid terminology

Before diving into the concepts of Grid it’s important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it’s easy to confuse them with one another if you don’t first memorize their meanings defined by the Grid specification. But don’t worry, there aren’t many of them.

Grid Container

The element on which  display: grid  is applied. It’s the direct parent of all the grid items. In this example  container  is the grid container.

The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.

The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

The children (i.e.  direct  descendants) of the grid container. Here the  item  elements are grid items, but  sub-item  isn’t.

The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

CSS Grid properties

Properties for the parent (grid container).

• grid-template-columns
• grid-template-rows

grid-template-areas

Grid-template.

• grid-column-gap
• grid-row-gap

justify-items

Align-items, place-items, justify-content, align-content, place-content.

• grid-auto-columns
• grid-auto-rows

grid-auto-flow

Defines the element as a grid container and establishes a new grid formatting context for its contents.

• grid  – generates a block-level grid
• inline-grid  – generates an inline-level grid

The ability to pass grid parameters down through nested elements (aka subgrids) has been moved to  level 2 of the CSS Grid specification.  Here’s  a quick explanation .

grid-template-columns grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

• <track-size>  – can be a length, a percentage, or a fraction of the free space in the grid using the  fr  unit ( more on this unit over at DigitalOcean)
• <line-name>  – an arbitrary name of your choosing

Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

If your definition contains repeating parts, you can use the  repeat()  notation to streamline things:

Which is equivalent to this:

If multiple lines share the same name, they can be referenced by their line name and count.

The  fr  unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

The free space is calculated  after  any non-flexible items. In this example the total amount of free space available to the  fr  units doesn’t include the 50px:

Defines a grid template by referencing the names of the grid areas which are specified with the  grid-area  property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

• <grid-area-name>  – the name of a grid area specified with  grid-area
• .  – a period signifies an empty grid cell
• none  – no grid areas are defined

That’ll create a grid that’s four columns wide by three rows tall. The entire top row will be composed of the  header  area. The middle row will be composed of two  main  areas, one empty cell, and one  sidebar  area. The last row is all  footer .

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces between them they represent a single cell.

Notice that you’re not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is  foo , the name of the area’s starting row line and starting column line will be  foo -start , and the name of its last row line and last column line will be  foo -end . This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.

A shorthand for setting  grid-template-rows ,  grid-template-columns , and  grid-template-areas  in a single declaration.

• none  – sets all three properties to their initial values
• <grid-template-rows>  /  <grid-template-columns >  – sets  grid-template-columns  and  grid-template-rows  to the specified values, respectively, and sets  grid-template-areas  to  none

It also accepts a more complex but quite handy syntax for specifying all three. Here’s an example:

That’s equivalent to this:

Since  grid-template  doesn’t reset the  implicit  grid properties ( grid-auto-columns ,  grid-auto-rows , and  grid-auto-flow ), which is probably what you want to do in most cases, it’s recommended to use the  grid  property instead of  grid-template .

column-gap row-gap grid-column-gap grid-row-gap

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

• <line-size>  – a length value

The gutters are only created  between  the columns/rows, not on the outer edges.

Note: The  grid-  prefix will be removed and  grid-column-gap  and  grid-row-gap  renamed to  column-gap  and  row-gap . The unprefixed properties are already supported in Chrome 68+, Safari 11.2 Release 50+, and Opera 54+.

gap grid-gap

A shorthand for  row-gap  and  column-gap

• <grid-row-gap>   <grid-column-gap>  – length values

If no  row-gap  is specified, it’s set to the same value as  column-gap

Note : The  grid-  prefix is deprecated (but who knows, may never actually be removed from browsers). Essentially  grid-gap  renamed to  gap . The unprefixed property is already supported in Chrome 68+, Safari 11.2 Release 50+, and Opera 54+.

Aligns grid items along the  inline (row)  axis (as opposed to  align-items  which aligns along the  block (column)  axis). This value applies to all grid items inside the container.

• start  – aligns items to be flush with the start edge of their cell
• end  – aligns items to be flush with the end edge of their cell
• center  – aligns items in the center of their cell
• stretch  – fills the whole width of the cell (this is the default)

This behavior can also be set on individual grid items via the  justify-self  property.

Aligns grid items along the  block (column)  axis (as opposed to  justify-items  which aligns along the  inline (row)  axis). This value applies to all grid items inside the container.

• stretch  – fills the whole height of the cell (this is the default)
• baseline – align items along text baseline . There are modifiers to baseline — first baseline and last baseline which will use the baseline from the first or last line in the case of multi-line text.

This behavior can also be set on individual grid items via the  align-self  property.

There are also modifier keywords safe and unsafe (usage is like align-items: safe end ). The safe keyword means “try to align like this, but not if it means aligning an item such that it moves into inaccessible overflow area”, while unsafe will allow moving content into inaccessible areas (“data loss”).

place-items  sets both the  align-items  and  justify-items  properties in a single declaration.

• <align-items>  /  <justify-items>  – The first value sets  align-items , the second value  justify-items . If the second value is omitted, the first value is assigned to both properties.

For more details, see  align-items  and  justify-items .

This can be very useful for super quick multi-directional centering:

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like  px . In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the  inline (row)  axis (as opposed to  align-content  which aligns the grid along the  block (column)  axis).

• start  – aligns the grid to be flush with the start edge of the grid container
• end  – aligns the grid to be flush with the end edge of the grid container
• center  – aligns the grid in the center of the grid container
• stretch  – resizes the grid items to allow the grid to fill the full width of the grid container
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between  – places an even amount of space between each grid item, with no space at the far ends
• space-evenly  – places an even amount of space between each grid item, including the far ends

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like  px . In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the  block (column)  axis (as opposed to  justify-content  which aligns the grid along the  inline (row)  axis).

• stretch  – resizes the grid items to allow the grid to fill the full height of the grid container
• space-around  – places an even amount of space between each grid item, with half-sized spaces on the far ends

place-content  sets both the  align-content  and  justify-content  properties in a single declaration.

• <align-content>  /  <justify-content>  – The first value sets  align-content , the second value  justify-content . If the second value is omitted, the first value is assigned to both properties.

All major browsers except Edge support the  place-content  shorthand property.

For more details, see  align-content  and  justify-content .

grid-auto-columns grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka  implicit grid tracks ). Implicit tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid. (see  The Difference Between Explicit and Implicit Grids )

• <track-size>  – can be a length, a percentage, or a fraction of the free space in the grid (using the  fr  unit)

To illustrate how implicit grid tracks get created, think about this:

This creates a 2 x 2 grid.

But now imagine you use  grid-column  and  grid-row  to position your grid items like this:

We told .item-b to start on column line 5 and end at column line 6,  but we never defined a column line 5 or 6 . Because we referenced lines that don’t exist, implicit tracks with widths of 0 are created to fill in the gaps. We can use  grid-auto-columns  and  grid-auto-rows  to specify the widths of these implicit tracks:

If you have grid items that you don’t explicitly place on the grid, the  auto-placement algorithm  kicks in to automatically place the items. This property controls how the auto-placement algorithm works.

• row  – tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default)
• column  – tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary
• dense  – tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later

Note that  dense  only changes the visual order of your items and might cause them to appear out of order, which is bad for accessibility.

Consider this HTML:

You define a grid with five columns and two rows, and set  grid-auto-flow  to  row  (which is also the default):

When placing the items on the grid, you only specify spots for two of them:

Because we set  grid-auto-flow  to  row , our grid will look like this. Notice how the three items we didn’t place ( item-b ,  item-c  and  item-d ) flow across the available rows:

If we instead set  grid-auto-flow  to  column ,  item-b ,  item-c  and  item-d  flow down the columns:

A shorthand for setting all of the following properties in a single declaration:  grid-template-rows ,  grid-template-columns ,  grid-template-areas ,  grid-auto-rows ,  grid-auto-columns , and  grid-auto-flow  (Note: You can only specify the explicit or the implicit grid properties in a single grid declaration).

• none  – sets all sub-properties to their initial values.
• <grid-template>  – works the same as the  grid-template  shorthand.
• <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?  – sets  grid-template-rows  to the specified value. If the  auto-flow  keyword is to the right of the slash, it sets  grid-auto-flow  to  column . If the  dense  keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If  grid-auto-columns  is omitted, it is set to  auto .
• [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>  – sets  grid-template-columns  to the specified value. If the  auto-flow  keyword is to the left of the slash, it sets  grid-auto-flow  to  row . If the  dense  keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If  grid-auto-rows  is omitted, it is set to  auto .

The following two code blocks are equivalent:

And the following two code blocks are equivalent:

It also accepts a more complex but quite handy syntax for setting everything at once. You specify  grid-template-areas ,  grid-template-rows  and  grid-template-columns , and all the other sub-properties are set to their initial values. What you’re doing is specifying the line names and track sizes inline with their respective grid areas. This is easiest to describe with an example:

Properties for the Children (Grid Items)

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column

justify-self

float ,  display: inline-block ,  display: table-cell ,  vertical-align  and  column-*  properties have no effect on a grid item.

grid-column-start grid-column-end grid-row-start grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines.  grid-column-start / grid-row-start  is the line where the item begins, and  grid-column-end / grid-row-end  is the line where the item ends.

• <line>  – can be a number to refer to a numbered grid line, or a name to refer to a named grid line
• span <number> – the item will span across the provided number of grid tracks
• span <name> – the item will span across until it hits the next line with the provided name
• auto – indicates auto-placement, an automatic span, or a default span of one

If no  grid-column-end / grid-row-end  is declared, the item will span 1 track by default.

Items can overlap each other. You can use  z-index  to control their stacking order.

Learn more about the span notation in this article by DigitalOcean .

grid-column grid-row

Shorthand for  grid-column-start  +  grid-column-end , and  grid-row-start  +  grid-row-end , respectively.

• <start-line>  /  <end-line>  – each one accepts all the same values as the longhand version, including span

If no end line value is declared, the item will span 1 track by default.

Gives an item a name so that it can be referenced by a template created with the  grid-template-areas  property. Alternatively, this property can be used as an even shorter shorthand for  grid-row-start  +  grid-column-start  +  grid-row-end  +  grid-column-end .

• <name>  – a name of your choosing
• <row-start>  /  <column-start>  /  <row-end>  /  <column-end>  – can be numbers or named lines

As a way to assign a name to the item:

As the short-shorthand for  grid-row-start  +  grid-column-start  +  grid-row-end  +  grid-column-end :

Aligns a grid item inside a cell along the  inline (row)  axis (as opposed to  align-self  which aligns along the  block (column)  axis). This value applies to a grid item inside a single cell.

• start  – aligns the grid item to be flush with the start edge of the cell
• end  – aligns the grid item to be flush with the end edge of the cell
• center  – aligns the grid item in the center of the cell

To set alignment for  all  the items in a grid, this behavior can also be set on the grid container via the  justify-items  property.

Aligns a grid item inside a cell along the  block (column)  axis (as opposed to  justify-self  which aligns along the  inline (row)  axis). This value applies to the content inside a single grid item.

To align  all  the items in a grid, this behavior can also be set on the grid container via the  align-items  property.

place-self  sets both the  align-self  and  justify-self  properties in a single declaration.

• auto  – The “default” alignment for the layout mode.
• <align-self>  /  <justify-self>  – The first value sets  align-self , the second value  justify-self . If the second value is omitted, the first value is assigned to both properties.

All major browsers except Edge support the  place-self  shorthand property.

You’ll likely end up using a lot of fractional units in CSS Grid, like 1fr . They essentially mean “portion of the remaining space”. So a declaration like:

Means, loosely, 25% 75% . Except that those percentage values are much more firm than fractional units are. For example, if you added padding to those percentage-based columns, now you’ve broken 100% width (assuming a content-box box model). Fractional units also much more friendly in combination with other units, as you can imagine:

Sizing Keywords

When sizing rows and columns, you can use all the  lengths  you are used to, like  px , rem, %, etc, but you also have keywords:

• min-content : the minimum size of the content. Imagine a line of text like “E pluribus unum”, the min-content is likely the width of the word “pluribus”.
• max-content : the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence.
• auto : this keyword is a lot like fr units, except that they “lose” the fight in sizing against fr units when allocating the remaining space.
• Fractional units: see above

Sizing Functions

• The fit-content() function uses the space available, but never less than min-content and never more than max-content .
• The minmax() function does exactly what it seems like: it sets a minimum and maximum value for what the length is able to be. This is useful for in combination with relative units. Like you may want a column to be only able to shrink so far. This is extremely useful and probably what you want :
• The min() function.
• The max() function.

The repeat() Function and Keywords

The  repeat()  function can save some typing:

But repeat() can get extra fancy when combined with keywords:

• auto-fill : Fit as many possible columns as possible on a row, even if they are empty.
• auto-fit: Fit whatever columns there are into the space. Prefer expanding columns to fill space rather than empty columns.

This bears the most famous snippet in all of CSS Grid and one of the all-time great CSS tricks :

The difference between the keywords is spelled out in detail here .

An experimental feature of CSS grid is masonry layout. Note that there are lots of approaches to CSS masonry , but mostly of them are trickery and either have major downsides or aren’t what you quite expect.

The spec has an official way now, and this is behind a flag in Firefox:

See Rachel’s article for a deep dive.

Subgrid is an extremely useful feature of grids that allows grid items to have a grid of their own that inherits grid lines from the parent grid.

This is only supported in Firefox right now, but it really needs to get everywhere.

It’s also useful to know about display: contents; . This is not the same as subgrid, but it can be a useful tool sometimes in a similar fashion.

CSS Grid browser support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Fluid columns snippet.

Fluid width columns that break into more or less columns as space is available, with no media queries!

CSS Grid animation

According to the CSS Grid Layout Module Level 1 specification, there are 5 animatable grid properties:

• grid-gap ,  grid-row-gap ,  grid-column-gap  as length, percentage, or calc.
• grid-template-columns ,  grid-template-rows  as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list.

As of this writing, only the animation of  (grid-)gap ,  (grid-)row-gap ,  (grid-)column-gap  is implemented in any of the tested browsers.

CSS-Grid tricks!

4 css grid properties (and one value) for most of your layout needs.

A Calendar in Three Lines of CSS

A Clever Sticky Footer Technique

A grid of logos in squares, a lightweight masonry solution.

Accordion Rows in CSS Grid

A responsive grid layout with no media queries.

An Auto-Filling CSS Grid With Max Columns of a Minimum Size

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

Breaking Out with CSS Grid Explained

Bringing CSS Grid to WordPress Layouts

Building a CSS Grid Overlay

Building a Conference Schedule with CSS Grid

Building a hexagonal grid using CSS grid

Breaking the grid, css grid and custom shapes, part 1.

Cool Little CSS Grid Tricks for Your Blog

Counting with css counters and css grid.

Creating a Bar Graph with CSS Grid

Css grid can do auto height transitions, css grid: one layout, multiple ways, css grid starter layouts, equal width columns in css grid are kinda weird, expandable sections within a css grid.

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

Flexbox-like “just put elements in a row” with css grid, grid, content re-ordering and accessibility, implicit grids, repeatable layout patterns, and danglers, look ma, no media queries responsive layouts using css grid.

Making A Bar Chart with CSS Grid

Overlapping header with css grid, positioning overlay content with css grid.

Preventing a Grid Blowout

Simple named grid areas, techniques for a newspaper layout with css grid and border lines between elements.

The Holy Grail Layout with CSS Grid

Using position sticky with css grid, learning css grid, a collection of interesting facts about css grid layout.

An Introduction to the `fr` CSS unit

Centering in css: a complete guide, css grid layout module level 2, css grid in ie: css grid and the new autoprefixer.

Does CSS Grid Replace Flexbox?

Don’t use my grid system (or any others), fit-content and fit-content(), getting started with css grid, flexbox and grids, your layout’s best friends, grid level 2 and subgrid, grid for layout, flexbox for components, hello subgrid, is css float deprecated, quick what’s the difference between flexbox and grid, some css grid strategies for matching design mockups.

The Auto-Flowing Powers of Grid’s Dense Keyword

The difference between explicit and implicit grids, things i’ve learned about css grid layout.

Thinking Outside the Box with CSS Grid

To grid or not to grid, using grid named areas to visualize (and reference) your layout.

Why we need CSS subgrid

Css grid videos, #115: don’t overthink it grids, #019: building a simple grid, #032: making the grid responsive, #153: getting started with css grid, #208: a css grid layout with pictures down one side matched up with paragraphs on the other, #179: a grid of squares, more css grid sources.

• CSS Grid Layout Module Level 1 (W3C)
• Grid by Example (Rachel Andrew)
• Learning CSS Grid Layout (Rachel Andrew)
• CSS Grid Layout: Introduction (DigitalOcean)
• CSS Grid Layout: The Repeat Notation (DigitalOcean)
• CSS Grid Layout: The Span Keyword (DigitalOcean)
• CSS Grid Layout: The Fr Unit (DigitalOcean)
• CSS Grid: Holy Grail Layout (DigitalOcean)
• How To Use CSS Grid Properties to Justify and Align Content and Items (DigitalOcean)

An Interactive Guide to CSS Grid

Introduction.

CSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts.

It's also surprisingly complex. It took me quite a while to truly become comfortable with CSS Grid!

In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it. ✨

Link to this heading Mental model

CSS is comprised of several different layout algorithms , each designed for different types of user interfaces. The default layout algorithm, Flow layout, is designed for digital documents. Table layout is designed for tabular data. Flexbox is designed for distributing items along a single axis.

CSS Grid is the latest and greatest layout algorithm. It's incredibly powerful: we can use it to build complex layouts that fluidly adapt based on a number of constraints.

The most unusual part of CSS Grid, in my opinion, is that the grid structure , the rows and columns, are defined purely in CSS:

With CSS Grid, a single DOM node is sub-divided into rows and columns. In this tutorial, we're highlighting the rows/columns with dashed lines, but in reality, they're invisible.

This is super weird! In every other layout mode, the only way to create compartments like this is by adding more DOM nodes. In Table layout, for example, each row is created with a <tr> , and each cell within that row using <td> or <th> :

Unlike Table layout, CSS Grid lets us manage the layout entirely from within CSS. We can slice up the container however we wish, creating compartments that our grid children can use as anchors.

Link to this heading Grid flow

We opt in to the Grid layout mode with the display property:

By default, CSS Grid uses a single column, and will create rows as needed, based on the number of children. This is known as an implicit grid , since we aren't explicitly defining any structure.

Here's how this works:

Implicit grids are dynamic; rows will be added and removed based on the number of children. Each child gets its own row.

By default, the height of the grid parent is determined by its children. It grows and shrinks dynamically. Interestingly, this isn't even a “CSS Grid” thing; the grid parent is still using Flow layout, and block elements in Flow layout grow vertically to contain their content. Only the children are arranged using Grid layout.

But what if we give the grid a fixed height? In that case, the total surface area is divided into equally-sized rows:

Link to this heading Grid Construction

By default, CSS Grid will create a single-column layout. We can specify columns using the grid-template-columns property:

Code Playground

By passing two values to grid-template-columns — 25% and 75% — I'm telling the CSS Grid algorithm to slice the element up into two columns.

Columns can be defined using any valid CSS < length-percentage > value , including pixels, rems, viewport units, and so on. Additionally, we also gain access to a new unit, the fr unit:

fr stands for “fraction”. In this example, we're saying that the first column should consume 1 unit of space, while the second column consumes 3 units of space. That means there are 4 total units of space, and this becomes the denominator. The first column eats up ¼ of the available space, while the second column consumes ¾.

The fr unit brings Flexbox-style flexibility to CSS Grid. Percentages and <length> values create hard constraints, while fr columns are free to grow and shrink as required, to contain their contents.

Try shrinking this container to see the difference:

In this scenario, our first column has a cuddly ghost that has been given an explicit width of 55px. But what if the column is too small to contain it?

To be more precise: the fr unit distributes extra space. First, column widths will be calculated based on their contents. If there's any leftover space, it'll be distributed based on the fr values. This is very similar to flex-grow , as discussed in my Interactive Guide to Flexbox .

In general, this flexibility is a good thing. Percentages are too strict.

We can see a perfect example of this with gap . gap is a magical CSS property that adds a fixed amount of space between all of the columns and rows within our grid.

Check out what happens when we toggle between percentages and fractions:

Notice how the contents spill outside the grid parent when using percentage-based columns? This happens because percentages are calculated using the total grid area. The two columns consume 100% of the parent's content area, and they aren't allowed to shrink. When we add 16px of gap , the columns have no choice but to spill beyond the container.

The fr unit, by contrast, is calculated based on the extra space. In this case, the extra space has been reduced by 16px, for the gap . The CSS Grid algorithm distributes the remaining space between the two grid columns.

Link to this heading Implicit and explicit rows

What happens if we add more than two children to a two-column grid?

Well, let's give it a shot:

Interesting! Our grid gains a second row. The grid algorithm wants to ensure that every child has its own grid cell. It’ll spawn new rows as-needed to fulfill this goal. This is handy in situations where we have a variable number of items (eg. a photo grid), and we want the grid to expand automatically.

In other situations, though, we want to define the rows explicitly, to create a specific layout. We can do that with the grid-template-rows property:

By defining both grid-template-rows and grid-template-columns , we've created an explicit grid. This is perfect for building page layouts, like the “Holy Grail” ? layout at the top of this tutorial.

Link to this heading The repeat helper

Let's suppose we're building a calendar:

CSS Grid is a wonderful tool for this sort of thing. We can structure it as a 7-column grid, with each column consuming 1 unit of space:

This works , but it's a bit annoying to have to count each of those 1fr ’s. Imagine if we had 50 columns!

Fortunately, there's a nicer way to solve for this:

The repeat function will do the copy/pasting for us. We're saying we want 7 columns that are each 1fr wide.

Here's the playground showing the full code, if you're curious:

Link to this heading Assigning children

By default, the CSS Grid algorithm will assign each child to the first unoccupied grid cell, much like how a tradesperson might lay tiles in a bathroom floor.

Here's the cool thing though: we can assign our items to whichever cells we want! Children can even span across multiple rows/columns.

Here's an interactive demo that shows how this works. Click/press and drag to place a child in the grid * :

The grid-row and grid-column properties allow us to specify which track(s) our grid child should occupy.

If we want the child to occupy a single row or column, we can specify it by its number. grid-column: 3 will set the child to sit in the third column.

Grid children can also stretch across multiple rows/columns. The syntax for this uses a slash to delineate start and end:

At first glance, this looks like a fraction, ¼. In CSS, though, the slash character is not used for division, it's used to separate groups of values. In this case, it allows us to set the start and end columns in a single declaration.

It's essentially a shorthand for this:

There's a sneaky gotcha here: The numbers we're providing are based on the column lines , not the column indexes.

It'll be easiest to understand this gotcha with a diagram:

Confusingly, a 4-column grid actually has 5 column lines. When we assign a child to our grid, we anchor them using these lines. If we want our child to span the first 3 columns, it needs to start on the 1st line and end on the 4th line.

Link to this heading Grid areas

Alright, time to talk about one of the coolest parts of CSS Grid. 😄

Let's suppose we're building this layout:

Using what we've learned so far, we could structure it like this:

This works, but there's a more ergonomic way to do this: grid areas.

Here's what it looks like:

Like before, we're defining the grid structure with grid-template-columns and grid-template-rows . But then, we have this curious declaration:

Here's how this works: We're drawing out the grid we want to create, almost as if we were making ASCII art ? . Each line represents a row, and each word is a name we're giving to a particular slice of the grid. See how it sorta looks like the grid, visually?

Then, instead of assigning a child with grid-column and grid-row , we assign it with grid-area !

When we want a particular area to span multiple rows or columns, we can repeat the name of that area in our template. In this example, the “sidebar” area spans both rows, and so we write sidebar for both cells in the first column.

Should we use areas, or rows/columns? When building explicit layouts like this, I really like using areas. It allows me to give semantic meaning to my grid assignments, instead of using inscrutable row/column numbers. That said, areas work best when the grid has a fixed number of rows and columns. grid-column and grid-row can be useful for implicit grids.

Link to this heading Being mindful of keyboard users

There's a big gotcha when it comes to grid assignments: tab order will still be based on DOM position, not grid position.

It'll be easier to explain with an example. In this playground, I've set up a group of buttons, and arranged them with CSS Grid:

In the “RESULT” pane, the buttons appear to be in order. By reading from left to right, and from top to bottom, we go from one to six.

If you're using a device with a keyboard, try to tab through these buttons. You can do this by clicking the first button in the top left (“One”), and then pressing Tab to move through the buttons one at a time.

You should see something like this:

The focus outline jumps around the page without rhyme or reason, from the user's perspective. This happens because the buttons are being focused based on the order they appear in the DOM.

To fix this, we should re-order the grid children in the DOM so that they match the visual order, so that I can tab through from left to right, and from top to bottom. *

Link to this heading Alignment

In all the examples we've seen so far, our columns and rows stretch to fill the entire grid container. This doesn't need to be the case, however!

For example, let's suppose we define two columns that are each 90px wide. As long as the grid parent is larger than 180px, there will be some dead space at the end:

We can control the distribution of the columns using the justify-content property:

If you're familiar with the Flexbox layout algorithm, this probably feels pretty familiar. CSS Grid builds on the alignment properties first introduced with Flexbox, taking them even further.

The big difference is that we're aligning the columns , not the items themselves. Essentially, justify-content lets us arrange the compartments of our grid, distributing them across the grid however we wish.

If we want to align the items themselves within their columns, we can use the justify-items property:

When we plop a DOM node into a grid parent, the default behaviour is for it to stretch across that entire column, just like how a <div> in Flow layout will stretch horizontally to fill its container. With justify-items , however, we can tweak that behaviour.

This is useful because it allows us to break free from the rigid symmetry of columns. When we set justify-items to something other than stretch , the children will shrink down to their default width, as determined by their contents. As a result, items in the same column can be different widths.

We can even control the alignment of a specific grid child using the justify-self property:

Unlike justify-items , which is set on the grid parent and controls the alignment of all grid children, justify-self is set on the child. We can think of justify-items as a way to set a default value for justify-self on all grid children.

Link to this heading Aligning rows

So far, we've been talking about how to align stuff in the horizontal direction. CSS Grid provides an additional set of properties to align stuff in the vertical direction:

align-content is like justify-content , but it affects rows instead of columns. Similarly, align-items is like justify-items , but it handles the vertical alignment of items inside their grid area, rather than horizontal.

To break things down even further:

Finally, in addition to justify-self , we also have align-self . This property controls the vertical position of a single grid item within its cell.

Link to this heading Two-line centering trick

There's one last thing I want to show you. It's one of my favourite little tricks with CSS Grid.

Using only two CSS properties, we can center a child within a container, both horizontally and vertically:

The place-content property is a shorthand. It's syntactic sugar for this:

As we've learned, justify-content controls the position of columns. align-content controls the position of rows. In this situation, we have an implicit grid with a single child, and so we wind up with a 1×1 grid. place-content: center pushes both the row and column to the center.

There are lots of ways to center a div in modern CSS, but this is the only way I know of that only requires two CSS declarations!

Link to this heading Tip of the iceberg

In this tutorial, we've covered some of the most fundamental parts of the CSS Grid layout algorithm, but honestly, there's so much more stuff we haven't talked about!

If you found this blog post helpful, you might be interested to know that I've created a comprehensive learning resource that goes way deeper . It's called CSS for JavaScript Developers .

The course uses the same technologies as my blog, and so it's chock full of interactive explanations. But there are also bite-sized videos, practice exercises, real-world-inspired projects, and even a few mini-games.

If you found this blog post helpful, you'll love the course . It follows a similar approach, but for the entire CSS language, and with hands-on practice to make sure you're actually developing new skills.

It's specifically built for folks who use a JS framework like React/Angular/Vue. 80% of the course focuses on CSS fundamentals, but we also see how to integrate those fundamentals into a modern JS application, how to structure our CSS, stuff like that.

If you struggle with CSS, I hope you'll check it out. Gaining confidence with CSS is game-changing , especially if you're already comfortable with HTML and JS. When you complete the holy trinity, it becomes so much easier to stay in flow, to truly enjoy developing web applications.

You can learn more here:

I hope you found this tutorial useful. ❤️

Last Updated

November 22nd, 2023

A front-end web development newsletter that sparks joy

My goal with this blog is to create helpful content for front-end web devs, and my newsletter is no different! I'll let you know when I publish new content, and I'll even share exclusive newsletter-only content now and then. No spam, unsubscribe at any time.

If you're a human, please ignore this field.

• Get started Get started for free

Figma design

Design and prototype in one place

Collaborate with a digital whiteboard

Translate designs into code

Get the desktop, mobile, and font installer apps

See the latest features and releases

• Prototyping
• Design systems
• Wireframing
• Online whiteboard
• Team meetings
• Strategic planning
• Brainstorming
• Diagramming
• Product development
• Web development
• Design handoff
• Product managers

Organizations

Config 2024

Register to attend in person or online — June 26–27

Creator fund

Build and sell what you love

User groups

Join a local Friends of Figma group

Learn best practices at virtual events

Customer stories

Read about leading product teams

Stories about bringing new ideas to life

Get started

• Developer docs
• Best practices
• Reports & insights
• Resource library
• Help center

5 top web design grid layout examples

It happens to every designer: You're brought in to fix a disorganized website, but how to create order isn't obvious. How do you lay out web pages so they make sense to users? Where do key user interface (UI) features go, and how does the information flow across the site? A web design grid can help you design an elegant solution.

Read on to discover:

• What a web design grid is—and how a grid system can improve interface design and overall user experience (UX)
• Pro tips to create a web design grid that works for your design system
• Five proven web design grid layout examples to get started.

What is a web design grid?

Digital designers use grids to plot content and other UX design features on a website. Think of your grid system as a showcase made of boxes, neatly arranged in rows and columns. To organize your page layout, you can fit text, images, and UI design elements into this grid structure. This makes important elements easier to find and workflows easier to follow, from landing pages to web forms.

“A grid system helps the designer rationalize decisions, but you don’t need to get hung up on pixel perfection,” explains Tom Lowry, Director of Advocacy at Figma. For Tom's pro tips on using grids for design projects, check out his article “ Everything you need to know about layout grids ”—and for specific tips on using grids in web design, read on.

3 benefits of web design grids

When you apply a grid to your web design, you're faced with decisions about what goes where —and why. Grids help you put UX design principles into practice, and quickly see how moving a few UI elements can improve site functionality.

Grid website design has three key benefits:

• Consistency. Grid spacing and layouts set standard spacing, alignment, and size for your design elements. With a coherent structure and clear hierarchy in place, you can create a consistent site experience that works across different devices.
• Design efficiency. Consider your grid a handy point of reference for your team throughout the design process, from sketches and prototyping to web development. Establishing a framework upfront lightens the cognitive load of deciding where to place text, images, videos, and other site elements.
• User understanding. Users won’t stick around if they're confused or can’t find what they want. Organizing site features reduces user confusion and increases engagement.

Real-life grid design

In urban planning, a bird’s-eye view of a city layout reveals its grid. Streets divide buildings, parks, and parking lots. Similarly, web designers use sequential columns and rows to create a baseline grid. Content, features, and whitespace fill these boxes–much like buildings, parks, and parking lots in a city grid.

Grid website basics

Look closely at any website plotted on a grid, and you'll recognize these key elements at work:

• Margins separate content from the edge of the page.
• Flowlines break up page space into bands, guiding readers through sections. They help align typography, making text easier to scan.
• Rows are horizontal bands that divide page space, so content is easier to scroll.
• Columns are vertical blocks that help align visual elements for clarity. To see how you can make your design feel spare or crowded, try shifting your column width or increasing the number of columns on a page.
• Gutters are buffers between rows and columns. You can change the gutter width to help group related content, or set different elements apart.
• Modules are building blocks of content and visual elements, grouped together into rows and columns.

How to create a web design grid

First, decide which of the two main types of grids you want to use for your design. With hard grids , all page elements align strictly to baseline rows and columns. Soft grids hold content together more loosely, using consistent base unit spaces between elements.

“Hard grids can be technically challenging with the way elements work within a web browser, especially across different device sizes,” Tom explains. “The idea of hard grids came from print and newspaper or editorial design, so it’s a little antiquated. In reality, I think soft grids are more practical. Not every single little thing has to adhere to an underlying grid in digital spaces.”

Next, establish your spatial system, with pointers from Figma on creating grid layouts . To set the standard size and spacing for your UI elements, use these three design fundamentals:

• Base units are the smallest units of measurement in your design—every page element will be a multiple of this measurement. The standard base unit for HTML or CSS design is usually 0.5 or 1 REM (root ephemeral unit), equivalent to eight or 16 pixels (px). Since pixels are fixed values, it's better to use REM measurements to ensure your grid is scalable (see below) and meets accessibility standards .
• Sizing is the height and width of UI elements, measured in base unit increments.
• Padding is the space between UI elements, measured in base unit increments.

Pro tips for scale in responsive web design

Before you set sizes for your grid elements, consider users accessing your site on different devices. To create a responsive grid design, set the sizes of key page elements like margins and rows as percentages in REM, rather than fixed pixel values. This helps your design adapt to different screen sizes.

To make a responsive layout work, consider scale. “On a mobile device, you want small margins because you don’t want any content touching the edges of the screen," Tom explains. "On a desktop website, you want liquid or flexible margins so your text doesn’t span across a giant widescreen." Readability is another key consideration in responsive design. "You can use extra margin space for navigation or additional information—but let those extra elements collapse and hide on smaller screens if they compromise the reading experience. ”

5 popular web design grid layout examples

Now you're ready to design your grid website. To browse different types of grids, Tom recommends the book Grid Systems in Graphic Design by Josef Müller-Brockmann. "Even though it’s rooted in print design, it has lots of good examples and illustrations,” he says.

From browsing online, you'll also recognize these five popular web design grid layouts:

Example 1: Block grid

Also known as a single-column or manuscript grid , this simple block grid features a large, central rectangular column, filling most of the page space within the margins.

Block grids support a vertical reading experience, drawing the reader’s eyes downward. This is ideal for text-heavy content like blogs, newsletters, articles, or an About Us page. Google Docs and Microsoft Word both use block grids.

Block grids are plain, so design elements are vital to enhance the visual flow. Play around with these elements to break up monotony:

• White space
• Hero images
• Shape dividers
• Bullet points

Example 2: Column grid

You'll recognize column grids from print and digital newspapers, which organize content into columns. Media sites range from two to 12-column grids, but three is considered the UX sweet spot.

With a column grid layout, text, visual elements, and videos fit within the column's vertical lines and flowlines. A classic web design use case for column grids is a pricing page, where site visitors can easily compare and contrast cost and feature differences to inform purchases.

Example 3: Modular grid

Most websites and apps that display a gallery of images rely on modular grids to organize content into neat columns and rows. For example, a user’s profile on Instagram displays videos and photos in modules. Clothing websites often show products in modular fashion for easy comparison.

A modular grid provides three primary advantages:

• Ease of use . Users intuitively know how to navigate a modular site with grid layouts.
• Product display . Exhibiting dozens of products at once maximizes product views.
• Responsiveness. Modular grids help desktop and mobile sites load easily.

Example 4: Baseline grid

A baseline grid is like a piece of notebook paper—a dense grid with equally spaced horizontal lines. These lines dictate where text must fit, aligning text throughout the document for scanability. The once-standard 8px grid system uses a 4px baseline—but today, web designers measure text size in REM to ensure it meets scalability and size standards for accessibility .

Your baseline grid impacts key design decisions, including:

• Line height pairings
• Margin spacing
• Padding spacing

Example 5: Hierarchical grid

Hierarchies allow you to organize modules and other page elements in order of importance, while offering a more flexible, responsive page design. Tesla’s Model S page shows how a hierarchical grid layout keeps responsive content modules organized.

Snap to the grid with Figma

A grid is a handy tool for any website designer, helping to outline the look and feel of the entire user experience. But they can also unlock creativity, Tom says. “Grid systems didn't always provide me with the flexibility I wanted—but when I discovered how layout grids work in Figma, it opened up design possibilities.”

For starters, Figma website wireframes let you apply a layout grid to any frame. Then you can use Figma's grid and spacing templates to define your page structure, hierarchy, and rhythm clearly—as you'll see in this popular web web design grid layout example from Figma's professional design community.

Ready to launch your next grid website design?

Build your web design layout with Figma

Keep reading.

What is visual hierarchy

If everything looks the same, then you see nothing. Visual hierarchy can change that.

Read on to find out what it takes to design engaging UI, and create a memorable UX.

What is product design?

Learn how product designers help define which goals matter, from both user and business perspectives

A rapid desktop prototyping tool

Mockplus - Design Faster. Collaborate Better.

Prototype, design, collaborate, and design systems all in Mockplus

A Complete Guide to UI Grid Layout Design

Good organization and positioning of UI visual elements is key to creating a great web or mobile experience. Designers rely on layouts to introduce structure in design and give users a predictable rhyme as well as a sense of familiarity.

Grids work as a framework that helps product teams to arrange UI elements in a way that allows maintaining good visual balance from page to page. It allows designers and developers to create more consistent and appealing UIs.

If you are learning how to create a UI grid layout, this guide is for you. It illustrates the basics of grid layouts, such as what they are, why they are so important, and how you can use and create effective grid layouts. Examples, templates, and tools mentioned below will help you make more professional designs.

What is a grid layout design?

When it comes to website or mobile app design, a grid is a set of intersecting horizontal and vertical lines that divide your pages into countless columns and rows. No matter whether these lines are real or imaginary, a grid always serves as a framework or backbone that helps you position, align and arrange content on your page more precisely.

Let's first check a website grid example:

As the image above shows, the pink grid has divided the CNN web page into many columns and gives designers an easier way to position and align texts, images, videos, and other elements on the page.

Here are several things you should know to understand grid layouts better:

Grid layout types - Symmetric vs asymmetric

Generally speaking, there are two major types of UI grid layouts: Symmetric and asymmetric.

Symmetric grids  often follow a center line and enable designers to distribute all content around a center point or axis. Equal columns or rows help designers create a comfortable and aesthetically pleasing layout.

Asymmetric grids , also called broken grids, do not have any center line or point. Asymmetric grid allows designers to create a more interesting yet ordered page layout. It can be a good choice for designers who want to create a distinctive yet personalized design for users.

Responsive grid layout

“What is responsive grid layout, and how can I use it to improve my design?“ is a very common question among UI designers. So, let's talk about this type of grid.

A responsive grid layout is a grid layout that can scale with different screen sizes. In comparison with the fixed grid layout that can only be viewed on a particular device, the responsive grid layout enables you to view page content on different devices and platforms. It is one of the most critical parts for designers who want to create fully responsive projects.

Why should you use the grid layout?

These days, designers always have their own reasons to use grid layouts. Here are the main reasons why you should build an effective yet eye-catching grid layout:

1). Better organization of UI elements

Grid layouts offer a clear structure of horizontal and vertical lines that makes it easier for designers to place and align elements on a page. Using a grid it's much easier to keep everything in order.

2). Easier collaboration with designers and developers

When working with designers and developers, a clear grid layout helps to avoid any misunderstanding and mistakes. Grid acts as a guide that allows you and your team to place elements and structure your designs consistently.

3). Keep all page layout consistent

A clear grid layout can help you and your team to set consistent sizes, spacing, blocks for your projects. It can also help you create a layout template for all your key pages. The visual hierarchy will also be enhanced easily with the aid of the grid.

4). Use broken grids to impress users

Unlike symmetric grids that help designers create comfortable UIs, broken grids help them showcase information on a page differently and create more interesting yet eye-catching visual effects. It is also a good method to impress users and promote product brands.

How to use grid layouts to improve your UI designs?

After learning the benefits that a clear grid layout can bring, let's see how you can create a grid layout. Here are several tips that you should keep in mind:

1). Customize grids according to your design needs

Grid layouts are often used to manage the relationships and proportions between page elements. That’s why you need to customize the grids according to your design needs. Here are several things you should consider:

Customize columns and rows

When designing with grids, visual designers typically ask the following questions:

• How many columns and rows should be used? 
• What column width and row height should I choose? 
• Is it necessary to set the block size or gutter width? 

All these questions should be asked before you start to work with the grids. It would be best if you always customized these properties based on your layout needs.

If you don't want to create a custom grid layout, you can start with a 12-column grid.

Consider constraints

When it comes to grid layouts, some designers insist that adding constraints can restrict their design creativity. However, it's important to remember the old saying, "No order without rules." Creative constraints not only can give you a different angle of view on your projects but also allow you to find better solutions. Sometimes, they can also help you create a far more distinctive design.

Use a baseline grid to align elements

A baseline grid is a dense grid of equally spaced horizontal lines that can help you align texts, images, videos, cards and other elements on your page. It is a good tool to create clear and near typography and enhance the visual hierarchy of your design.

Place elements inside a grid field, not in the gutter

To ensure that all elements on the page are properly organized and aligned, place elements inside a grid field.

Please note: It does not mean you can only begin and end everything inside a grid field. If necessary, you should also step outside the grid to emphasize a certain element or part of your page.

Pay attention to spacing, margin and other factors

The spacing between elements, the margin outside the grids, and the gutters between grid blocks can also leave a huge impact on how the grid works. 

2). Don’t forget about responsive design

Responsive design is one of the most popular design trends. When designing with grids, never forget about responsive design. To ensure that your grid layout will also work across different screen sizes, design using values in percentages and proportions rather than exact pixels.

3). Choose the right grid layout tool/generator

Use a grid layout tool to customize a grid layout for your project. Here are several tools that you should consider:

Pen and paper - map out and iterate grid layout ideas as soon as possible

At the very beginning of your design process, you may need to brainstorm your grid layout using a pen and paper. Map out everything that pops in your mind. It helps you save a lot of time and gives you more freedom to iterate your ideas quickly.

However, at the later stages, when you might want to discuss specific design details, you may want to switch to a more precise and refined design draft. The pen and paper method may no longer be suitable for you.

Mockplus - provides auto grid layouts to streamline your design workflow

Mockplus , a one-stop online product design platform, offers users an auto grid layout which enables them to customize all the columns, rows, gutters, and blocks with ease. You can show or hide these grid guides based on your needs. The auto responsive layout helps you create a responsive website or mobile app with ease.

As an all-in-one design platform, Mockplus enables your entire team (designers, developers, product managers, clients, users and stakeholders) to work together on the same project. Your entire design workflow, such as UX designing , prototyping , commenting, collaborating and design handoff , is connected easily in one place.

Layoutit - an online CSS grid generator

Layoutit is a simple online CSS grid generator that allows you to select your grid areas, add columns and rows, and name your grids with clicks. After creating the grid design, you can easily download the codes or share your grid as a link with your team.

4). Keep testing

No matter what type of product you are designing, you cannot ignore testing. The grid layout should also be tested and iterated.

Best UI grid layout examples & templates

To help you create your own grid layouts quickly, we've picked 10 of the best UI grid layout examples, templates and other resources:

1. Example Grid Set

Example Grid Set shares a set of CSS and HTML grid examples that you can use during web design. Many popular grid layouts are included, so this set can give you a lot of inspiration when you are working on a website or mobile app project.

2. Website Grid Layout Set

Website Grid Layout Set is a website that shows off new ideas about CSS grid layouts. A set of creative grid layout examples that are showcased on real websites are displayed there for your inspiration.

3. Restaurant Website CSS Grid

Restaurant Website CSS Grid is a two-column grid layout created for a restaurant website. With bright color schemes, bold design style and clear visual hierarchy, this website is an excellent example of a clear grid layout for common eCommerce websites.

4. Isomtric Ecommerce CSS Grid

Isomtric Ecommerce CSS Grid is a responsive and interactive ecommerce grid layout created for a shoe website. The unique 3D visual effect gives users an engaging appeal.

5. CSS Wizardry Grid System

CSS Wizardry Grid System is a fully responsive and mobile-first CSS/HTML grid system. It is nestable and easily reversible.

6. Bootstrap Grid System

Bootstrap Grid System is the fully responsive and mobile-first bootstrap grid system that has 12 columns. 

7. Material Responsive Grid

Material Responsive Grid is a popular grid system for designers. It is fully responsive and can adapt to different screen sizes and resolutions.

8. Flexbox Grid

Flexbox Grid is a responsive grid system based on the Flexbox display property. It enables you to specify different column sizes, offsets, alignment and more factors according to your needs.

10. Altason

Altason is a strategic design and innovation studio that devotes to creating a more beautiful planet. Its  official website uses asymmetric grids to showcase different products, and this grid helps to create a unique atmosphere.

11. Malika Favre

Malika Favre is a portfolio website with a bold and minimal design style. It is a good example of how designers can use space and colors in symmetric grids to attract and engage website visitors.

12. Lift Mag

Lift Mag provides another grid example that uses a top carousel bar to help users navigate. If you are looking for inspiration to create a grid layout for a virtual magazine or video website, this is a perfect example.

13. Grid layout template series

Grid layout template series has picked a series of website templates using CSS grid layout. You can copy the source code and use it to improve your website project.

FAQ for UI designers

1. is css grid responsive.

Yes. Here is what Wikipedia tells us:

"CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create complex responsive web design layouts more easily and consistently across browsers."

CSS grids give designers an easier way to create a responsive grid layout.

2. Is CSS grid better than Flexbox?

No. These days, there are plenty of methods for designers to control web page layout, including the  box model ,  CSS flexbox ,  tablets and more. And when it comes to mobile and web design, both CSS grid and Flexbox have their own pros and cons.

For example, Flexbox is best for organizing elements in a single row or column, while CSS grid is best for arranging elements in multiple rows and columns. So, instead of thinking about CSS grid vs. Flexbox, it's better to combine them to improve your design.

3. Is CSS grid better than Bootstrap?

It depends. When you use Bootstrap, you need to write more HTML. However, when you use CSS grids, you need to write more CSS code. 

Grid layouts offer rules of how you and your team should organize and position the UI elements to create a more consistent and effective layout. Grid layouts engage users and offer them a more appealing yet comfortable visual experience.

We hope this complete guide about UI grid layout design can help you better understand the concept of grids and create your grid designs.

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

Uploads design files from Sketch, Figma, Axure, Photoshop, and Adobe XD into our design handoff tool.

A free online prototyping tool that can create wireframes or highly interactive prototypes in just minutes.

A vector-based UI design tool enables you design in the way you want to.

Your single source of truth to build, maintain and evolve design assets in one place.

Related Content

Design Faster. Collaborate Better.

Designing the best user experience. Mockplus does it all!

Interactive prototyping

Unified collaboration

Scalable design systems

© 2014-2023 Mockplus Technology Co., Ltd. All rights reserved.

• Reviews / Why join our community?
• For companies
• Frequently asked questions

The Grid System: Building a Solid Design Layout

Now that we’ve seen some grids at work in the Rule of Thirds article, let’s examine them a little more deeply. As a concept that deals so fundamentally with the fabric and background of our work as designers, it’s easy to overlook the power of grids and think more about the elements we want to create. Many traditional artists still paint their masterpieces over a faint series of intersecting lines. To help us make the most of our work surfaces and create with precision, we designers have a tool that echoes this. We call it the Grid System .

The Story of the Grid

One of the easiest ways to achieve an organized design is to apply a grid system. It’s a tried and tested technique that first found favor in print layout. Low-tech and cheap, this is a great resource for you as a designer – consider it a top-ten tool in your office. Grids in interactive design can also help provide a consistent experience across multiple devices with different screen sizes. Users are happy when they see familiar features laid out as they would expect to find them.

The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. Consider the grids we find in maps. Islands, towns, lakes will appear on an exact part of a map, on a set of North-South/East-West coordinates. They will always appear in the same place on other maps. A GPS accesses these coordinates to help guide us; imagine the chaos if there were no grid system for it to latch on to and keep us right on the road!

The grid system was first used to arrange handwriting on paper and then in publishing to organize the layout of printed pages. Given that the printed page and the virtual page have much in common,it should come as no surprise that we also use it in web and app design. Creating a grid system for the virtual page is a little more complex than for the physical page – browsers handle information differently, and screens vary in size.Happily, however, the principle remains the same.

That’s not to say that there’s no resistance to using the grid system. Some designers feel that the grid limits creativity .While this may be true, it’s important to recognize that many designers employ the grid system regularly because it is so effective at organizing information.

The best layout is one which provides no distraction from the content. Thanks to its mathematical precision, the grid system is a great example of this kind of layout.

Grid as a Design Principle

Villard De Honnecourt, a 13th-century French artist, merged the grid system with the golden ratio to produce printed page layouts with margins based on fixed ratios. That methodology continues to the present day, as the majority of printed books and magazines prove. Publishers, editors and designers place so much effort on keeping the tradition, not only because it’s known to be the best way but for another large reason. The readers (i.e., the users) expect to find everything in its proper place. Remember, the human eye is drawn to elements; it is also easily upset if it is confused or made to work out a problem it was not expecting to encounter.

Author/Copyright holder: Jason Prini. Copyright terms and licence: CC BY-NC-SA 2

Let’s try a quick experiment to see just how effective a grid can be. If you have two blank sheets of paper handy, draw about four or five shapes at random on one of them. Don’t worry about neatness and geometry – it’s just a simple illustration . When you’re finished, try to copy them as they appear on the second blank page (please don’t “cheat” by putting the second page under the first and drawing over the shapes again to trace them). Even if you have a very sharp eye and sure hand, you’ll notice that it’s practically impossible to replicate the first design, with everything appearing in the same place.

The second part of this experiment is optional, but it will help to drive home the point. If you have squared or graph paper lying around, take two pages and repeat the procedure. Do you notice how copying your original is so much easier when you can guide your hand? The grid made by the intersecting lines of this special paper gives us the gift of making truly accurate copies. By training our eye on the number of columns across and rows down, we can duplicate in free hand almost as perfectly as a photocopier.

The image at the top of our article illustrates the components of the printed page: a header, footer, as well as right and left margins. Inside the margins, a designer has created equal-sized columns with a space between them, known as a gutter . Knowing that the page can include one or more columns, the designer can place elements such as images and text within these columns to provide alignment with the rest of the content. The image and paragraph areas may overlap in one or more columns.

Similar to the way in which vertical grid lines create these useful columns, horizontal grid lines guide the height of elements in the design. These portions of the grid are known as rows . As designers, we want to make the height of each row as a proportion of the width of the columns. For example, the ratio of column width to row height is 3:2, 4:3, etc.

Notice how we arrange the rows equally within the page layout, and how we insert gutter space between each row. We can then place elements of the page content in one or more rows, as shown in the figure at the top.

Grids in Interactive Design

In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page. Additionally, it provides a guide for designers to create multiple layouts that support responsive themes for different screen sizes.

We divide the web page layout into columns that we separate with margins, using whitespace , between them. The width of the columns and the margins are equal, and we can place content in one or more columns based on the layout of the design.

The application of a grid means that the design can be divided into multiple columns that can help designers organize content. For example,we can have one, two, three, six, twelve, or more columns. Today's screen resolutions reach very large sizes compared with what was available in the early days of computers. Even so, using a 960-pixel width can ensure that the design is properly displayed on many computer screens. It can also help designers modify the layout for mobile devices.

The examples above show grid systems that are based on the 960-pixel resolution from http://960.gs , which provides a useful guide for building your own grid-based web layouts.

There are other helpful tools for building grid layouts available online, too:

http://1200px.com/1200px : This website helps you build a grid system for much wider website designs than the 960-pixel style.

Golden Grid System : This website can help you build a grid system and optimize it for mobile-responsive display.

If you want to explore further grid systems for different purposes, you can find some at the following websites:

Csswizardry-grids

Responsive Grid System

RWDGrid (responsive grid system)

The Take Away

The Grid System has been helping artists of all types (including writers) for a long time. First utilized by a 13th-Century artist, who merged it with the golden ratio, the grid system has been a tried, tested, and trusted methodology for centuries. It firstly empowered writers to position their handwriting neatly on paper; later on, it became a universal standard in the publishing industry. Publishing houses everywhere retain strict observance of the grid system in producing copy that users find both pleasing to the eye and in line with what they would expect to see.

Author/Copyright holder: Lauren Manning. Copyright terms and licence: CC BY 2.0

Regarding setting out elements, grids afford superb precision. We can see this principle most prominently in maps, noting how locations are pinpointed with grid lines that represent coordinates. The pursuit of accurate cartography would enable navigators to discover new places in the great unknown parts of the world. Now, with the grid lines that mark both longitude and latitude, GPS devices allow us to get wherever we wish to go.

However, cartographer’s maps represent fixed “designs” that change only imperceptibly over many years. Cartography might be a science, but grids, with their mathematical precision, are brilliant and much-needed tools of artists, too. Throughout history, artists have been making use of grid lines to plan and paint images of their own, which capture the best, most pleasing proportions.

Easy to create and practically free of charge, grids also give us web and app designers the ability to lay out our work in an organized and precise manner. By enabling us to insert elements in boxes created by their intersecting lines, grids enable us to make a consistent user experience across multiple devices. For example, the dimensions and layouts of our computer and smartphone screens differ. Planning our work so that it can adjust to appear on different platforms keeps our designs intact, in proportion and in the places where our user expects to find them.

Designers use columns and rows, shaped according to set column width and row height proportions (such as 3:2 or 4:3), and gutters (the spaces between these “boxes”) to present elements of our designs in the best way.

Although we have the luxury of very high screen resolutions that allow us to show ever-more impressive and realistic designs, by using a grid based on a width of 960 pixels, we can make sure that our designs will translate properly to be displayed on many computer screens and mobile devices such as cell phones. However, we have a wealth of resources at our disposal to help us fine-tune our choice of grid system to match the design we want.

However you use the grid system to build your design, you should keep in mind other principles, such as the Golden Ratio. Aiming to create a consistent user experience also involves creating a pleasing user experience that will be consistent across many devices. If you keep in mind that your choices will be working in concert with the known tendencies of the user’s eye, you will be able to create eye-catching designs that are better organized, as seen by your users on computer, tablet, or cell phone screens.

Reference List

Bigman, A. History of the Design Grid. 99 Designs. Retrieved from: http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1. [2014, Oct 1]

Friedman, V. Designing With Grid-Based Approach. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/2007/04/14/designi... [2014, Oct 1]

Shillcock, R. (2013) All About Grid Systems. Web Design Tuts Plus. Retrieved from: http://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471. [2015, May]

Hero Image: Author/Copyright holder: Jeremy Keith. Copyright terms and licence: CC BY 2.0

Human-Computer Interaction: The Foundations of UX Design

Get Weekly Design Insights

Topics in this article, what you should read next, 10 great sites for ui design patterns.

• 1.4k shares

Apple’s Product Development Process – Inside the World’s Greatest Design Organization

How to Change Your Career from Graphic Design to UX Design

What is Interaction Design?

User Interface Design Guidelines: 10 Rules of Thumb

• 1.3k shares

Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

The Principles of Service Design Thinking - Building Better Services

A Simple Introduction to Lean UX

• 3 years ago

Dieter Rams: 10 Timeless Commandments for Good Design

The 7 Factors that Influence User Experience

• 1.2k shares

Open Access—Link to us!

We believe in Open Access and the  democratization of knowledge . Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change , cite this article , link to us, or join us to help us democratize design knowledge !

Privacy Settings

Our digital services use necessary tracking technologies, including third-party cookies, for security, functionality, and to uphold user rights. Optional cookies offer enhanced features, and analytics.

Experience the full potential of our site that remembers your preferences and supports secure sign-in.

Governs the storage of data necessary for maintaining website security, user authentication, and fraud prevention mechanisms.

Enhanced Functionality

Saves your settings and preferences, like your location, for a more personalized experience.

Referral Program

We use cookies to enable our referral program, giving you and your friends discounts.

Error Reporting

We share user ID with Bugsnag and NewRelic to help us track errors and fix issues.

Optimize your experience by allowing us to monitor site usage. You’ll enjoy a smoother, more personalized journey without compromising your privacy.

Analytics Storage

Collects anonymous data on how you navigate and interact, helping us make informed improvements.

Differentiates real visitors from automated bots, ensuring accurate usage data and improving your website experience.

Lets us tailor your digital ads to match your interests, making them more relevant and useful to you.

Advertising Storage

Stores information for better-targeted advertising, enhancing your online ad experience.

Personalization Storage

Permits storing data to personalize content and ads across Google services based on user behavior, enhancing overall user experience.

Advertising Personalization

Allows for content and ad personalization across Google services based on user behavior. This consent enhances user experiences.

Enables personalizing ads based on user data and interactions, allowing for more relevant advertising experiences across Google services.

Receive more relevant advertisements by sharing your interests and behavior with our trusted advertising partners.

Enables better ad targeting and measurement on Meta platforms, making ads you see more relevant.

Allows for improved ad effectiveness and measurement through Meta’s Conversions API, ensuring privacy-compliant data sharing.

LinkedIn Insights

Tracks conversions, retargeting, and web analytics for LinkedIn ad campaigns, enhancing ad relevance and performance.

LinkedIn CAPI

Enhances LinkedIn advertising through server-side event tracking, offering more accurate measurement and personalization.

Google Ads Tag

Tracks ad performance and user engagement, helping deliver ads that are most useful to you.

Share Knowledge, Get Respect!

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

New to UX Design? We’re giving you a free ebook!

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

New to UX Design? We’re Giving You a Free ebook!

Creating a Grid

Intermediate html and css course, introduction.

Now that you know what CSS Grid Layout is, you’ll learn how to create your own grid. This lesson will cover making a grid container, adding columns and rows, the explicit and implicit concept behind Grid and how to space out grid gaps.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• Make a grid container.
• Define grid tracks.
• Explain the difference between an implicit and explicit grid.
• Set gaps between grid cells.

Setting up a grid

This lesson will show you how easy it is to make a grid layout without much work. In upcoming lessons, you will find out more about positioning and how to make complex grids, but for now we’ll start with something basic.

Grid container

We can think about CSS Grid in terms of a container and items. When you make an element a grid container, it will “contain” the whole grid. In CSS, an element is turned into a grid container with the property display: grid or display: inline-grid .

See the Pen My First Grid | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

In this example, the parent element marked class="container" becomes a grid container and each of the direct child elements below it automatically become grid items. What’s easy about CSS Grid is that you don’t have to assign each child element a property.

Note that only the direct child elements will become grid items here. If we had another element as a child under one of these child elements it would not be a grid item. In the example below, the paragraph element is not a grid item:

But just as you learned in the flexbox lessons, grid items can also be grid containers. So you could make grids inside of grids if you wanted.

Lines and tracks in grids, oh my!

Since you’re coding along with our example (right?) you will notice it doesn’t look very grid-ish yet. A lot of resources on CSS Grid like to show you boxes and outlined grid tables right from the start. But if your grid container and grid items don’t have any borders you won’t actually see these lines on the page. So don’t worry, they’re still there!

If you inspect these elements on a webpage using developer tools, you will notice grid badges on the grid elements in the code. The Layout options of the dev tools allows you to select an overlay that can show these invisible lines, tracks and areas of the grid. You will read about using a browser’s developer tools in the assignment below and learn more about lines, tracks, and areas in the next lesson.

Columns and rows

Now that we have our grid container with several grid items all set up, it’s time to specify our columns and rows. This will define the grid track (the space between lines on a grid). So we could set a column track to give us space between our columns and a row track to give us space between our rows. We will get into the specifics on tracks and lines in the next lesson, but for now let’s just make some columns and rows.

The properties grid-template-columns and grid-template-rows make defining column and row tracks easy. For this lesson, we’ll stick to defining our columns and rows using pixels. In the upcoming lessons, you’ll learn more about defining with percentages and fractional units too.

Going back to our grid container from above, let’s define two columns and two rows to place our four grid items:

See the Pen Columns and Rows 1 | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

If we want to add more columns or rows to our grid, we can define these values to make another track. Let’s say we wanted to add a third column to our example:

See the Pen Columns and Rows 2 | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

CSS Grid also includes a shorthand property for defining rows and columns. In our previous example we can replace the properties for grid-template-rows and grid-template-columns with the shorthand grid-template property. Here we can define our rows and columns all at once. For this property, rows are defined before the slash and columns are defined after the slash. Let’s keep the same column and row values, but use the shorthand property instead:

Columns and rows don’t have to share all the same values either. Let’s change the property values of our columns so that the first column is five times as wide as the others:

See the Pen Columns and Rows 3 | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

Explicit vs implicit grid

Let’s go back to our original example of a 2x2 layout for four grid items. What happens if we add a fifth item to our container without changing our grid-template-columns or grid-template-rows properties?

See the Pen Implicit Grid | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

You’ll notice our fifth item was placed on the grid and it’s been slotted into a third row we did not define. This is because of the implicit grid concept and it’s how CSS Grid is able to automatically place grid items when we haven’t explicitly defined the layout for them.

When we use the grid-template-columns and grid-template-rows properties, we are explicitly defining grid tracks to lay out our grid items. But when the grid needs more tracks for extra content, it will implicitly define new grid tracks. Additionally, the size values established from our grid-template-columns or grid-template-rows properties are not carried over into these implicit grid tracks. But we can define values for the implicit grid tracks.

We can set the implicit grid track sizes using the grid-auto-rows and grid-auto-columns properties. In this way we can ensure any new tracks the implicit grid makes for extra content are set at values that we defined.

Let’s say we want any new rows to stay the same value as our explicit row track sizes:

By default, CSS Grid will add additional content with implicit rows. This means the extra elements would keep being added further down the grid in a vertical fashion. It would be much less common to want extra content added horizontally along the grid, but that can be set using the grid-auto-flow: column property and those implicit track sizes can be defined with the grid-auto-columns property.

The gap between grid rows and columns is known as the gutter or alley. Gap sizes can be adjusted separately for rows and columns using the column-gap and row-gap properties. Furthermore, we can use a shorthand property called gap to set both row-gap and column-gap .

Before adding our grid gap properties let’s make things a little easier to see without relying on developer tools. We’ll go ahead and add a border around our grid items so we can get a better sense of their placement around each other:

See the Pen Gap 1 | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

Next we’ll use a slight grid column gap to space out our two columns a bit:

See the Pen Gap 2 | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

Finally we’ll add a lot of gap to our rows to highlight the difference:

See the Pen Gap 3 | CSS Grid by TheOdinProject ( @TheOdinProjectExamples ) on CodePen .

You can also try playing with the shorthand gap to set both the row-gap and column-gap in the above CodePen.

Wrapping up our first grid

Now that you’ve made a grid you can start to see how easy it is to control the layout of your elements with CSS Grid. You may also realize how CSS Grid can solve common layout problems. In the next couple lessons we will cover positioning elements and advanced grid attributes. But first, check out the links below that cover making the basics of a grid in more detail.

• Read Parts I, II and III from CSS-Tricks Complete Guide to Grid.
• Watch this short video on Implicit vs Explicit Tracks from the Wes Bos CSS Grid course.
• Look through the developer tools docs on inspecting CSS Grid for Chrome.

Knowledge check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

• How does an HTML element become a grid item?
• What is the space between lines on the grid?
• How do you set gutters (also known as alleys) in the grid?
• Describe what happens when you have more content than defined tracks.
• How could you change the size for those undefined tracks?

Additional resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

• The MDN Basic Concepts of grid layout reviews many of the basics and introduces some additional concepts.
• Watch this short video on grid terminology from PeterSommerhoff.

Support us!

The odin project is funded by the community. join us in empowering learners around the globe by supporting the odin project.

How to Use CSS Grid Layout – Grid Properties Explained with Examples

Have you ever had a problem positioning items on your web browser? Perhaps every time you try to think of a solution, you become tired and give up.

If so, stay tuned as I reveal a new method for resolving these kinds of problems with minimal or no stress.

Welcome everyone. In this tutorial, we'll go through how to use the CSS grid layout.

First we'll learn what CSS Grid is and what it's meant to do. Then we'll go through the features of CSS grid, reasons why we should study it, and the benefits it brings to our projects. Finally, we'll discuss when it's best to use it.

What is CSS Grid?

So what is CSS Grid?

CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

Here is a concise definition of the CSS Grid layout:

CSS Grid is a powerful tool that allows for two-dimensional layouts for columns and rows to be created on the web. ( Source )

Features of CSS Grid Layout

Flexible track sizes.

You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will make your grid organized and responsive.

Item Placement

CSS grid has made it much easier to position items in the container in any area you want them to be without having to mess with the HTML markup.

Alignment Controls

The alignment of an element/item in a container is easier than ever before with CSS Grid. In the container, you can now arrange elements/items horizontally and vertically as you wish.

Benefits of CSS Grid

CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. CSS Grid also easy to use and is supported by most web browsers.

The CSS grid makes your mark-up cleaner (in your HTML code) and gives you a lot more flexibility. This is partly because you don’t have to change the mark-up (HTML code) to change the position of an item using the CSS grid.

All in all, CSS Grid Layout helps us build a more complex layouts using both columns and rows.

When Should You Use CSS Grid

Although you can use CSS Grid in practically any aspect of web development, there are certain situations when it's ideal.

For example, when we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).

Grid is also a good choice when we need a space or gap between elements. By using the CSS grid gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things.

CSS Grid Properties

The CSS grid layout consists of many grid properties. Now we'll take a look at some of them so we can learn how to use them.

Grid container property

This is a CSS grid property that houses the grid items/elements. We implement the CSS grid container property by setting the container to a display property of grid or in-line grid .

For Example:

Grid-template-column property

This is a property used to set each column’s width. It can also define how many columns you want to set to your project.

You can implement the CSS gird column property using   grid-template-column .

The code above shows that we have three columns. The width of columns one (the first column) and three (the third column) are set to 100px . The width of column two (the middle column) is set to auto .

This means that as the size of your screen increases, columns one and three take 100px of the screen width, while column two takes the remaining width of the screen (which is auto ).

Grid-template-row property

You use the CSS row property to set the height of each column. You can also use it to define how many rows you want to set in your project.

You can implement the CSS gird row property using grid-template-row , like this:

The code above shows that we have a total of two rows and those two rows are 50px high.

Note that we can also assign the column and row property to our HTML code at once by simply using gird-template . Grid-template is another way of representing the grid-template column and grid-template-row .

For example:

The code above will give you the same result as grid-template-column and grid-template-row .

To use the grid-template property, you will have to assign the value to the row first before assigning the column's value, just like the code above. The 50px 50px is for the row while 100px auto 100px is for the column.

A way to remember this is by thinking of the letter L:

Try this out and see it for yourself.

Column-gap property

As the name states, it is a grid property that assigns a space between two or more columns in a container. You can do this by using the column-gap property and giving it a value. For example:

From the code above, you can see that a gap of 20px was assigned to the column.

Row-gap property

Just like column-gap , row-gap is a CSS property that assigns a space between two or more rows in a container. For example:

Note that we can also assign a gap to both the columns and rows of a container by using the gap property. For this to work, we only assign one value to both the columns and the rows of the container, just like we did in the code above.

Here's an example:

From the diagram above, we can see that a gap of 20px was set to both the columns and rows of the container making them equally spaced.

Justify-content property

This is a grid property that you use in positioning items (columns and rows) horizontally in a container. It displays how the web browser positions the spaces around the items (columns and rows).

The justify-content property has six possible values:

• space-around
• space-between
• space-evenly

This positions the items at the left side of the browser and can be executed with the following code:

This positions the items at the right side of the browser and can be executed with the following code:

This positions the items at the center of the browser and can be executed with the following code:

Space-around

This property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next container.

This code can be executed like this:

Space-between

Just like the space-around property, space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container. It takes up the entire width of the container.

Space-evenly

Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container.

Note that all the justify-content properties position their items/elements horizontally. Try doing it yourself to understand it more.

Align-content property

Align-content is the opposite of justify-content . You use the align-content property in positioning items vertically in a container.

Just like justify-content , the align-content property has six possible values:

This positions the items at the top of the browser and can be executed with the following code:

This positions the items at the bottom of the browser and can be executed with the following code:

This property distributes the items along the side of the container evenly, where each item in the container has an equal amount of space from the next one vertically.

Just like the space-around property, Space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container, and takes up the entire width of the container in the vertical direction.

Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one vertically.

In today's article, we studied what CSS Grid Layout is all about, why we should learn it, and the properties of CSS grid.

Thank you for reading.

Have fun coding!

Hello, I go by the alias "Derek". I'm proficient in a wide range of technical skills, which I gained and continued to to hone through self-education.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Product Design Bundle and save

User Research New

Content Design

UX Design Fundamentals

Software and Coding Fundamentals for UX

• UX training for teams
• Hire our alumni
• Student Stories
• State of UX Hiring Report 2024
• Our mission
• Advisory Council

Education for every phase of your UX career

Professional Diploma

Learn the full user experience (UX) process from research to interaction design to prototyping.

Combine the UX Diploma with the UI Certificate to pursue a career as a product designer.

Professional Certificates

Learn how to plan, execute, analyse and communicate user research effectively.

Master content design and UX writing principles, from tone and style to writing for interfaces.

Understand the fundamentals of UI elements and design systems, as well as the role of UI in UX.

Short Courses

Gain a solid foundation in the philosophy, principles and methods of user experience design.

Learn the essentials of software development so you can work more effectively with developers.

Give your team the skills, knowledge and mindset to create great digital products.

Join our hiring programme and access our list of certified professionals.

Learn about our mission to set the global standard in UX education.

Meet our leadership team with UX and education expertise.

Members of the council connect us to the wider UX industry.

Our team are available to answer any of your questions.

Fresh insights from experts, alumni and the wider design community.

Success stories from our course alumni building thriving careers.

Discover a wealth of UX expertise on our YouTube channel.

Latest industry insights. A practical guide to landing a job in UX.

A complete guide to responsive grids (and how to use them)

Responsive grids are a powerful tool for creating sleek web designs that adapt to different screen sizes without getting distorted.

The State of UX Hiring Report 2024

Learn how to start your UX career with hard facts and practical advice from those who have gone before you. In this report, we look at UX hiring trends in 2024 to help you break into the industry.

Responsive grids are a powerful tool for creating sleek web designs that adapt to different screen sizes without getting distorted. By incorporating responsive grids into your designs, you’ll ensure your website is easy to navigate across all devices and browsers.

Whether you’re tackling a website redesign or building a completely new design from scratch, it’s important to understand how grid systems can elevate your user experience. To help you along your way, we’ve created this comprehensive guide covering everything you need to know about responsive grids; from why they matter, to best practices for incorporating them in your next project.

What are responsive grids?

• What are the elements of a responsive grid?

How to create responsive grids

• Best practices for responsive grids

[GET CERTIFIED IN UX]

A responsive grid in web design is a guiding structure that helps designers organise elements on the page for a unified, consistent look and feel. Responsive grids are built using proportions, which helps elements line up properly when users view the site on different screens. 

So, why are responsive grids such an important part of the web design process?

By using responsive grids, web designers can ensure that the overall page layout looks consistent on any device. Responsive grids also mean content can be sectioned into modules—making it much easier to create dynamic websites without having to worry about compatibility issues across different browsers or devices.  

Responsive grids can also help speed up page loading times by eliminating unnecessary code from multiple versions of the same layout for different devices. 

There are three main types of responsive grid systems: 

• A fixed grid consists of columns that have a consistent width regardless of the size of the screen they’re viewed on.
• A fluid grid uses percentage-based widths instead of fixed widths, which means that the columns will resize automatically depending on the size of the screen they’re viewed on. 
• A hybrid grid combines both fixed and fluid elements in order to create an optimal user experience across all devices and screens. 

Using a fixed grid can help ensure consistency between devices, while a fluid grid allows for more flexibility as websites adapt to changing viewport sizes. Ultimately, the type of grid you use depends on your design objectives, so it’s important to weigh up the pros and cons of each grid when selecting the right one for your project.

What are the elements of a responsive grid? 

When it comes to the anatomy of a responsive grid, there are five key terms every web designer should know. 

Let’s look at the elements of a responsive grid at a glance. 

Columns are perhaps the most essential element of any responsive grid system. Columns allow you to divide your page into sections, making it easier for users to quickly scan content and locate specific pieces of information. The number of columns used in a layout will depend on the size and complexity of the project, but typically range from two to twelve. 

Gutters are the space between columns or rows in your design. They’re a crucial part of responsive grids, providing visual separation between different elements while giving your page a cohesive look and feel. Gutters also provide balance to your design by creating a uniform flow and establishing relationships between elements. 

  Margins  

Margins help establish visual hierarchy and ensure that elements don’t overlap unnecessarily. By adding white space between elements, margins make it easier for users to differentiate between different sections on the page without being overwhelmed by too much information at once. 

Breakpoints 

Breakpoints allow designers to optimise their design for different screen sizes. In essence, breakpoints refer to the specific points where a website layout changes. They trigger when certain criteria (e.g. specific screen size dimensions) are met, and help to ensure that content is displayed correctly no matter how the user is accessing it. 

Fields refer to the ‘boxes’ that appear within the grid. How many there are—and where they’re placed—will dictate the types of content that can be used on a page, which makes them an extremely useful tool for more complicated web pages or layouts. Ultimately, fields can help designers create highly complex designs for every platform without having to spend hours readjusting the content.

[UX DESIGN FUNDAMENTALS COURSE]

So now we know the anatomy of a grid—how do you actually go about creating one? 

Worry not, we’ve created a practical step-by-step guide to follow when using responsive grids in your next design project. 

Step 1: Decide on a screen size

The first step in creating a responsive grid system is to determine your target screen size. What size should the design be optimised for? What are the minimum and maximum sizes you need to support? This step will help you decide what kind of grid layout you should use, as well as which elements should appear at different breakpoints. 

The most common responsive grid sizes are 960px and 1440px. The 960px grid works well for desktop layouts, while the 1440px grid is more suitable for mobile design. 

Step 2: Choose your layout and measurements 

Next, you need to decide on your layout and measurements. Do you want a one-column or two-column layout? How wide should each column be? Will there be additional columns at larger breakpoints? Are there specific measurements that need to be taken into account when designing the page? 

Pro tip: The number of columns in your design will depend on its purpose and structure, but typically having more than 12 columns can make things look cluttered and hard to read. If possible, try to limit the number of columns to 8-10, as this allows more flexibility when designing without making things too crowded or difficult to use across different devices. Additionally, using column counts divisible by four (e.g., 4, 8, 12) makes it easier to distribute elements evenly throughout each page or section of your website.  

Step 3: Set the width of your gutters and margins 

The next step in creating a responsive grid is to configure the widths of gutters and margins. By default, most websites come with predefined values for these elements, but they might not be suitable for your needs. 

Both the gutters and margins should be set to provide enough breathing room between elements so that everything looks consistent no matter what size device it is being viewed on. When it comes to gutter sizes, you’ll need to experiment to figure out what works best for your design. Generally speaking, the narrower the gutters, the more it feels that all of your field elements are part of one single group with a seamless flow between them. On the other hand, wider gutters feel like each field belongs to separate entities or categories (think about creating space between two separate paragraphs).                   

Step 4: Start building your grid  

Once you’ve determined your screen size and chosen your layout, it’s time to start building your grid system. This involves creating classes for each element on the page (e.g., header, footer, sidebar), assigning widths and heights, and setting margins and padding where necessary. It’s also important to remember to consider mobile devices when designing your desktop grid—even if someone is viewing the page on their laptop or desktop computer, they may still want access to certain elements from their mobile device (e.g., navigation menu).  

During this stage, you’ll also define your breakpoints—in other words, how your design will respond when it reaches certain thresholds. When you set two breakpoints, the screen size between them will inherit the dimensions of the smaller-sized breakpoint. You’ll want to take your time to figure out where to place your breakpoints, and which elements will be hidden or re-adjusted when viewed on different screen sizes. 

Step 5: Test 

How do you know if your grid has helped you create a functioning, responsive site? Test! Once you’ve designed your site using a responsive grid, you can test your designs by viewing the site on various screen sizes—and iterating on anything that doesn’t look quite right. 

5 best practices for responsive grids 

When used correctly, responsive grids can make your website look sleek and professional. But how do you know you’re on the right track? 

Here are five best practices to keep in mind when working with responsive grids. 

Place elements inside column sets 

When designing with a responsive grid, it’s best to place elements inside of column sets so that they stay organised and consistent throughout the webpage. Not only will this ensure all elements have the same size and positioning across different devices, but it’ll also make it easier to add or remove elements from your page without having to redesign the layout from scratch. 

Don’t use columns as paddings 

Another golden rule when working with a responsive grid is not to use columns as padding for white space within the design. Instead of using empty columns as separators between elements, use margins or paddings instead. This helps keep the layout clean and prevents items from being misaligned on different devices as a result of inconsistencies between browsers. 

It’s okay to place elements outside the grid 

There might be times when you need to place an element or two outside of the main grid structure—and that’s okay! As long as they don’t disrupt the overall flow of the page, placing one or two elements outside of the grid can make them stand out (and add some personality and hierarchy to the interface). Just make sure that the elements are still correctly sized, so they don’t cause any alignment issues on mobile devices. 

Field elements should sit on a number of columns  

When laying out content on your page, it’s important to ensure that field elements sit on multiple columns within the grid system. This will help keep them aligned correctly regardless of device size and prevent them from overlapping each other if one element is larger than another (in terms of width). For example, if you have two text inputs side by side on a desktop but only one column wide on mobile, then you should make sure that both input fields sit on at least one column in order for them to remain aligned when viewed on both devices.  

Don’t leave field elements in the gutters 

Leaving field elements in gutters can result in confusion when users view your page on different device sizes—especially if those gutters become too small or large depending on screen size. Ensuring field elements are always within columns will keep everything properly aligned across all devices.

In today’s digital-first world, you can’t always bank on users navigating the site in the way you intended. You might have spent weeks designing a beautiful desktop site, only for the majority of its visitors to access the site on mobile. To avoid losing out to the competition, it’s crucial that your websites are functional and user-friendly across all devices and browsers. Luckily, by mastering responsive grids, it’s never been easier to achieve that goal. 

Hopefully, this guide provided you with an overview of what responsive grids are, and the steps to take to start implementing them in your design processes. Before you know it, you’ll be designing sleek, fully-optimised sites that your users can enjoy wherever they are! 

To learn more about dynamic web design, check out these resources: 

• 7 Examples of good digital UX design
• 8 helpful tips for UX designers collaborating with developers
• Good UX vs. Bad UX
• responsive grids

Subscribe to our newsletter

Get the best UX insights and career advice direct to your inbox each month.

Thanks for subscribing to our newsletter

You'll now get the best career advice, industry insights and UX community content, direct to your inbox every month.

Upcoming courses

Professional diploma in ux design.

Learn the full UX process, from research to design to prototyping.

Professional Certificate in UI Design

Master key concepts and techniques of UI design.

Certificate in Software and Coding Fundamentals for UX

Collaborate effectively with software developers.

Certificate in UX Design Fundamentals

Get a comprehensive introduction to UX design.

Professional Certificate in Content Design

Learn the skills you need to start a career in content design.

Professional Certificate in User Research

Master the research skills that make UX professionals so valuable.

Upcoming course

Build your UX career with a globally-recognised, industry-approved certification. Get the mindset, the skills and the confidence of UX designers.

You may also like

The ultimate guide to mobile app design: Follow these UI principles & best practices

The best online survey tools to use in 2024

What is colour theory? A complete introductory guide

Build your UX career with a globally recognised, industry-approved qualification. Get the mindset, the confidence and the skills that make UX designers so valuable.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Test your skills: Grid

The aim of this skill test is to assess whether you understand how a grid and grid items behave. You will be working through several small tasks that use different elements of the material you have just covered.

Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen , JSFiddle , or Glitch .

If you get stuck, you can reach out to us in one of our communication channels .

In this task, you should create a grid into which the four child elements will auto-place. The grid should have three columns sharing the available space equally and a 20-pixel gap between the column and row tracks. After that, try adding more child containers inside the parent container with the class of grid and see how they behave by default.

Your final result should look like the image below:

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

In this task, we already have a grid defined. By editing the CSS rules for the two child elements, cause them to span over several grid tracks each. The second item should overlay the first as in the image below:

Additional question:

• Can you now cause the first item to display on top without changing the order of items in the source?

In this task, there are four direct children in this grid. The starting point has them displayed using auto-placement. Use the grid-area and grid-template-areas properties to lay the items out as shown in the image below:

In this task, you will need to use both grid layout and flexbox to recreate the example as seen in the image below. The gap between the column and row tracks should be 10px. You do not need to make any changes to the HTML in order to achieve this.

Grids and Layouts in UI Design: A Guide

If grids and layouts in UI design still sometimes grind your gears, you’re at the right place. In this comprehensive guide, we’ll delve into the fundamental concepts of grids, their significance in UI design, and how they can empower you to create visually pleasing and user-friendly interfaces. 

Whether you’re a mid-level designer looking to refine your skills or a seasoned professional seeking a refresher, this article will provide valuable insights, tips, and tricks to master the art of grid-based layouts.

So, dive in and uncover the not-so-hidden potential of grids and layouts in UI design!

The importance of grids

Grids are the backbone of UI design, providing a systematic framework that helps organize and align elements within a layout. By understanding the structure of grids, you can achieve harmonious compositions that enhance visual hierarchy, improve readability, and create a cohesive user experience. 

Grids consist of intersecting horizontal and vertical lines that form columns and rows, acting as a guide for placing and aligning elements. The number of columns, gutter sizes, and margins can be customized based on the project’s requirements, offering flexibility and creativity in design.

Essential grid components

To fully understand grids and layouts in UI design, you must familiarize yourself with the foundational elements. Essential grid elements are margins, columns, rows, and gutters. 

Margins are the spaces around the outside edges of a grid. They create breathing room between the grid and the edges of the screen or container. Margins ensure your design has space to breathe and prevent elements from becoming cramped or crowded.

Columns are the vertical divisions within a grid. They define the width of content blocks and determine the horizontal arrangements of elements. Columns provide a structured layout where elements can be placed side by side or stacked vertically to create a visually balanced composition.

Rows are the horizontal divisions within a grid. They define the height of content blocks and determine how elements are arranged vertically. Rows allow consistent vertical spacing and alignment, ensuring elements are visually aligned and easily scanned.

Gutters are the spaces between columns or rows. They provide visual separation and help maintain spacing between elements. Gutters act as buffers between content blocks, preventing them from appearing too close together and ensuring enough breathing space for each element.

How to use grids

Grid structure.

Start by determining the number of columns and rows you want in your grid. Consider the content and layout requirements of your design. Commonly used grid structures for desktop web projects include 12-column and 16-column grids.

For mobile and tablet devices, you can use the same number of columns or less, usually 2 or 4, respectively.

Grid Spacing

Experiment with different gutter sizes to find the optimal spacing between columns and rows. Maintain consistency in gutter size throughout your design to create visual harmony. For responsive web projects, it’s completely fine to make gutters different for different devices or screen sizes.

Modular Scale

Utilize a modular scale for determining column widths and heights. A modular scale is a set of consistent ratios that helps maintain harmonious proportions across different screen sizes

Golden Ratio

Apply the golden ratio (approximately 1.618) to determine the ideal column width-to-height ratio for aesthetically pleasing designs.

Source: Rainbow

Soft grids vs. Hard Grids

There are multiple approaches to how to use grids and layouts in UI Design. Soft grids and hard grids are two distinct approaches used in UI design to establish structure, spacing, and sizing rules within a layout. Soft grids involve establishing spacing and sizing rules for elements within a layout using specific base numbers. 

For example, an 8-point or 4-point grid is a common example of a soft grid system. In this case, the main dimensions of the overall layout, such as the dimensions of a card, adhere to the hard grid (for example, a 12-column grid). 

However, the soft grid is then applied to elements inside the card. This includes setting inner padding, margins, or other spacing rules using specific numbers or increments from the soft grid.

A hard grid may consist of a specific number of columns, such as a 12-column grid. This grid establishes fixed column widths and consistent spacing between columns. Elements within the layout align to the columns of the grid, allowing for precise control over element placement and alignment.

How to use them?

You can make soft and hard grids work for you and your current design project in two ways – using the hybrid approach or breaking the grid.

Hybrid Approach

Consider using a hybrid approach combining soft and hard grid elements. You can establish a hard grid structure for critical elements while allowing flexibility within certain sections or components.

Breaking the Grid

Intentionally break the grid in certain areas to create visual interest or emphasize specific elements. This technique can add energy and draw attention to important content.

The 8-Point Grid System

The 8-Point Grid system is one of the essential topics when discussing grids and layouts in UI Design. The 8-point grid system is a powerful tool for consistency and alignment in UI design. This system uses multiples of 8 (e.g., 8px, 16px, 24px) for spacing, sizes, and alignments.

Adopting the 8-point grid system creates a harmonious and visually pleasing design, especially when working with multiple screen sizes and responsive layouts.

Key aspects of this system include:

• Establishing a baseline grid for vertical rhythm
• Utilizing spacing units based on multiples of 8
• Aligning icon and button sizes with the grid
• Modifying the grid as per project requirements

Embracing the 8-point grid system helps create cohesive and balanced UI designs.

How to use the 8-point Grid System in UI?

In grid-based UI Design, knowing how and when to use clever tricks is the key to delivering precise and aesthetically pleasing design.

Some of these tricks would include:

Baseline Grid

Establishing a baseline grid with an 8-point vertical rhythm forms the foundation for consistent spacing and vertical alignment. You ensure harmonious proportions and a visually pleasing composition by aligning text, icons, and other elements to this grid.

This technique enhances readability and creates a sense of order throughout your design.

Spacing Units

Tricks like spacing units can help you make the most of using grids and layouts in UI Design.

Using multiples of 8 as the standard unit for spacing between elements brings a delightful sense of consistency to your UI. You establish a coherent and balanced layout by employing values like 8px, 16px, or 24px for margins, gutters, and padding. This approach streamlines your design process and simplifies the alignment of elements within the grid.

Icon and Button Sizes

To maintain a visually cohesive and harmonious layout, aligning the sizes of icons, buttons, and other UI elements with the 8-point grid system is crucial. Ensuring their dimensions correspond to the multiples of 8 fosters visual harmony and balance. This technique creates a unified visual language and provides an intuitive and polished user experience.

Modifying the Grid

Every design project has unique requirements, and you can customize the 8-point grid system to suit your specific needs. Feel free to adjust the base unit (8px) and its multiples to achieve the desired visual effect if necessary. Modifying the grid allows you to strike the perfect balance between precision and adaptability, ensuring your design aligns flawlessly with your project objectives.

Advanced Figma Video Course

Get 3 Free Preview Lessons

Sign up now, and you’ll receive 3 free video lessons from our Advanced Figma Video Course.

" * " indicates required fields

How to achieve responsiveness with Grids and Layouts in UI Design

Nowadays, creating responsive designs that adapt seamlessly to different screen sizes and orientations isn’t “good to have”; it’s a must. Grids and layouts in UI design play a pivotal role in achieving responsiveness. Leveraging flexibility and structure grids ensures your designs are visually appealing and user-friendly across various devices. 

By considering supercharged tactics such as breakpoints, using flexible grids, implementing media queries, and adapting the layout for smaller screens, you can create compelling user experiences that seamlessly adapt to different devices.

1. Stacking Elements

Consider stacking elements vertically instead of relying on a complex grid structure for smaller screens. This approach ensures that content remains readable and accessible, even on devices with limited screen real estate. Prioritize important content and adjust the layout accordingly to maintain a clear and concise user interface.

2. Flexible Grids

Design your grid system to be flexible and adaptable. Use percentage-based widths or relative units like “fr” (fractional units) in CSS Grid to allow elements to resize proportionally. This approach enables your grid to adjust and accommodate varying screen sizes, ensuring a consistent and optimized layout.

3.Breakpoints

Define breakpoints based on common device widths (e.g., mobile, tablet, desktop) to adapt your layout as the screen size changes. You can optimize the user experience for each device category by strategically adjusting the grid structure at different breakpoints.

4.Media Queries

  Implement media queries to apply specific styles and adjust the grid structure at different breakpoints. Modify column counts and gutter sizes, or switch to another grid system. By tailoring the grid to the specific requirements of each device, you can create a seamless and engaging experience for users.

Reusable Grids in Figma

Figma, one of our favorite design tools, offers powerful features for setting up reusable grids, enhancing your efficiency and consistency when using grids and layouts in UI design.

Layout Grids

The “Layout Grid” feature lets you define your grid structure, including the number of columns, gutter sizes, and margins. 

For example, you can enter the desired value in the “Columns” field to specify the number of columns you want for your grid. The same goes for the Gutter field, which defines the spacing between columns, and margin fields.

Additionally, you can create grid styles to ensure consistency across designs, saving grid settings as reusable styles that you can easily apply to multiple frames or artboards. You can also adjust other options based on your preferences, such as grid visibility, color, and opacity.

Figma also enables you to apply grids to specific frames or artboards, allowing different grid structures for different sections or components. Leveraging Figma’s “Smart Layout” feature, you can automatically adjust the grid structure based on content changes, facilitating seamless iterations and maintaining the integrity of your grid.

Grid Styles

You can create Grid styles in Figma to ensure consistency across your designs. Save your grid settings as a style, and apply it to multiple frames or artboards.

All you have to do is follow these simple steps:

• In the right sidebar, go to the “Styles” tab
• Under the “Grid” section, you will find your saved grid styles
• Click on the desired grid style to apply to the selected frame or artboard

The grid will be instantly applied, providing a consistent layout structure.

Frame Grids

Figma will easily become your best friend for using grids and layouts in UI design. It allows you to apply grids to specific frames or artboards within your design, enabling different grid structures for different sections or components.

Select the frame or artboard where you want to apply a specific grid. Then, go to the right sidebar and click the “Layout Grid” tab. Enable the layout grid for the selected frame or artboard. Finally, specify the grid settings, such as columns, gutters, and margins, according to your requirements. With this simple tactic, your frame or artboard will have its unique grid structure while maintaining consistency with the overall design.

Smart Layout

Figma’s “Smart Layout” feature allows your grid to automatically adjust based on content changes, making it easier to maintain the integrity of the grid during the design iteration process. You can enable Smart Layout by selecting the frame or artboard with the grid applied. In the right sidebar, under the “Layout Grid” tab, toggle on the “Smart Layout” option.

When you resize or modify elements within the grid, the grid structure will automatically adjust to accommodate the changes while maintaining the desired layout. As mentioned, Figma easily lets you make the most out of grids and layouts in UI design.

Auto-Layout

Auto Layout is another helpful feature in Figma that helps maintain consistency in the inner spacing and sizing of elements and components when resizing the main frame.

Auto Layout ensures that your reusable grid’s spacing and sizing rules remain unchanged, resulting in a cohesive and consistent design.

Congratulations – you’ve made it to the very end of our comprehensive Grids and Layouts in UI Design Guide and gained valuable insight into how to turn these components into your biggest companions while creating seamless UI designs.

By understanding the importance of grids, the distinction between soft and hard grids, embracing the 8-point grid system, understanding how to achieve perfect responsiveness, and utilizing Figma’s features for setting up reusable grids, you’re now well-equipped to create visually stunning and user-centric interfaces.

If you want to deepen your existing knowledge and make Figma the biggest ally in your UI career path, check out our Advanced Figma Video Course. This extensive but comprehensible video course will teach you everything you need to know to be a confident Figma user and a better designer.

Feel free to explore our other Products and freebies that will help you boost your knowledge and advance your career.

For more helpful and educational content posted and explained daily, follow us on Instagram .

Happy designing! 🥳

You might like the following

Blog articles, ui glossary – list of essential ui design terms.

31 min read

Recommendations

Advanced Figma Tips for UX/UI Designers

How to start learning ui.

12 min read

Manage cookies that helps us deliver our services. By using our services, you agree to our cookies.

Your choices regarding cookies on this site

Please choose whether this site may use Basic, Functional or Advertising cookies, as described below from the Privacy Policy

Essential Cookies

These cookies enable core functionality such as security, verification of identity, and network management. These cookies can’t be disabled.

Functional Cookies

These cookies collect data to remember choices users make to improve and give a more personalized experience.

Marketing and Analytics Cookies

Marketing cookies are used to track advertising effectiveness to provide more relevant service and deliver better ads to suit your interests. Analytics cookies help us to understand how visitors interact with our website, discover errors and provide a better overall analytics.

HOME / Design Tips

Type of Grids: A Complete Guide for Designers

Discover the power of grids in design! They bring order to chaos, guide your audience, and improve user experience. Learn about different types of grids and how to use them effectively.

Have you ever marveled at the hidden structure behind a captivating design? How about when your eyes naturally follow an invisible path on a webpage, or in print? That’s not by accident. The secret sauce that makes this happen is called type of grids .

Picture this: You’re handed building blocks – each one unique and full of potential. Now, imagine trying to create something meaningful without any guiding lines or structures… it’s chaotic, right?

In walks grid systems – our unsung heroes – lending their invisible hands to arrange these blocks into harmonious patterns.

Not pondering if grids are necessary, but instead figuring out how to best utilize them for better design is what we’re after. Together, we’ll demystify column grids and modular layouts; delve into the magic of manuscript and baseline grids that break dense text into bite-sized pieces; and pick up handy tips on crafting rows.

Table of Contents:

The role of grids in graphic design, applying grid systems to web and print designs, understanding column and modular grids, decoding manuscript and baseline grids, organizing elements with grids, creating rows and columns, achieving visual organization and consistency, better user experience (ux), streamlined design processes, decoding vertical and horizontal lines, harnessing hang lines, baseline grids: the rhythm section, the power of proportions: golden ratio, web design examples using different types of layout designs, magazine and brochure design examples, what are the 4 types of grids, what are the 5 types of grids used in graphic design, how many types of grid lines are there, what are the different types of grid design, understanding grids in design.

You might think of grids as a boring necessity. But hold on. They’re more like the secret sauce that makes your design taste great. A good grid is like a road map guiding your audience through your work, making sure they don’t get lost.

Let’s start with graphic design projects. You’ve got colors, shapes, and typography all vying for attention. So how do you bring order to this creative chaos? Enter grids . Like an invisible hand, they help guide elements into their rightful place ensuring clarity and structure.

To put it simply: imagine playing Jenga without any rules – sounds chaotic right? That’s what designing without grids feels like.

What are Grids?

In essence, grids are tools used by designers to create consistency across different pages or screens. By defining fixed positions for various elements such as text boxes or images within a layout, these designs can then be replicated consistently throughout the project resulting in better user experience and improved readability.

• Grids increase conversions: An interesting stat here is that well-implemented grid systems have been known to improve conversion rates by up to 7%. Not too shabby for something you can barely see.
• Improving comprehension: With every element neatly placed according its grid position, users find content easier to understand, thus increasing engagement levels and overall interaction on the site.

Moving from graphic design to web and print, grids are like the backbone. They’re not flashy, but they hold everything together.

Ever visited a website where everything seemed out of place? That’s probably because there was no grid system in play. When you have one, it gives your content room to breathe while ensuring nothing looks haphazard or thrown together.

Importance of Grids in Design

When your layout is well-organized, it gives users visual hints about how to navigate the information.

Key Thought:

Think of grids as the unsung heroes in design, guiding your audience and bringing order to creative chaos. They’re tools that establish consistency across pages or screens, improve user experience and readability, and even boost conversion rates. Whether it’s graphic design or web/print designs – a well-implemented grid system can transform haphazard content into engaging experiences.

Types of Grid Layouts

In the vast world of design, grid layouts serve as the skeletal framework that holds our creative ideas. These grids come in various types including column grids, modular grids, manuscript grids, baseline grids, and PT (Point) grids.

The column grid, a favorite among newspaper and magazine layout editors, is akin to building blocks stacked side by side. It’s like how you would organize your bookshelf – books arranged neatly into vertical stacks or columns for easy accessibility.

Different from the column grid but equally useful are modular grids which comprise multiple rows and columns intersecting to form modules. Imagine an artist’s canvas partitioned into smaller squares, each providing a space for individual art pieces yet contributing to the overall masterpiece when viewed together – that’s what using a modular grid feels like.

Moving on to another popular choice amongst designers is the manuscript grid, also known as a single-column layout used mainly in documents with heavy text content such as novels or research papers. Just think about how words flow seamlessly line after line on pages of your favorite novel – thanks to this hero called ‘manuscript’.

The baseline grid, on the other hand, plays more with lines than spaces created by them: imagine red lines running horizontally across every page, helping designers position their elements accurately just like hang-lines do in laundry areas where clothes pegged at the same height give an organized look.

But the excitement doesn’t end here. If you’re a web design buff, you’ll love how the PT grid shines. It’s adored by UX/UI designers for its knack to adapt to any screen size and perfectly fill up your browser.

Grid layouts, they’re the foundation of great design. They give shape to our creative dreams. We’ve got column grids – imagine tidy bookshelves, modular ones like an artist’s canvas split into squares, manuscript grids perfect for text-rich stuff like novels, and baseline grids that let us align things just right. And hey, can’t leave out PT Grids – a web designer’s secret weapon.

Working with Different Types of Layout Designs

If you’re diving into the world of design, you’ve probably bumped into various types of layout designs. But how do we navigate this landscape? It’s simpler than it seems.

You can think about grids like a chef thinks about his kitchen – everything has its place. They give structure and help to organize elements in your work, whether that’s for graphic or web design.

A grid layout is like an invisible skeleton that holds your content together. From column grids used commonly in newspapers to modular ones found on websites, they all serve one purpose: organizing information effectively. Let’s say you’re working on a project where there are several sections – news updates, upcoming events, and contact details perhaps? Using different grid systems , each section will find its home sweet home.

Moving forward let’s learn how to create rows and columns within these mighty grid layouts. Imagine them as building blocks that form the basis of our beautiful skyscraper (design).

In order to achieve visual balance within your layout remember symmetric grids follow rules – left margin equals right margin while top matches bottom; it works great when aiming for consistency throughout multiple pages.

Looking for a layout with a bit more zest? An asymmetric design might just be the perfect fit for you.

Advantages of Using Grids

The creation of design is intricate, and the implementation of grids can be the factor that decides between an unstructured jumble and a visually attractive work. So let’s talk about how using grid systems in your design projects could improve readability, streamline processes, and enhance user experience.

If you ever attempted to set up furnishings in a room without having any type of strategy, you’d be familiar with how fast it can become an exercise of experimentation. Designing with grids is like having a floor plan for your layout—it gives everything its place. You get to create symmetry where it’s needed or break from it intentionally for visual interest. Interaction Design Foundation provides some great insights into this aspect.

Incorporating Efficiency in Design with Grids , designers position elements according to predefined guidelines which saves time deciding on margins equal spacing across different sections—think assembly line efficiency but make it creative.

We also cannot ignore ‘Improved Readability with Grids’ . They help guide the reader to follow through the content logically (from left-to-right or top-to-bottom), making information easier to digest—a crucial factor when we consider UX/UI design aspects.

You might have come across sites that are so cluttered; they give off “where do I even start?” vibes—not good. That’s where our trusty friend ‘grid’ steps up again. A well-executed grid system allows users to navigate easily around web pages because their eyes recognize patterns within the structured layout—sort like following breadcrumbs Hansel & Gretel style but less witchy.

Creating a balance between text and visual elements is key for effective communication. Grids help us achieve this by organizing content into vertical groups or parallel bands, which works great in reducing cognitive load on users—let’s call it design mindfulness.

And the cherry on top? You can use these grids over and over again. Yep, you heard it right; they’re reusable.

Using grids in design is like having a game plan—it organizes your layout, improves readability and enhances user experience. Grids let you create symmetry or break from it for visual interest, make information easier to digest, and reduce cognitive load on users. Plus, they’re reusable—a win-win situation.

Understanding Essential Elements of Grid Layouts

Designing a webpage or print layout without understanding the essential elements of grid layouts is like trying to assemble furniture without instructions. Let’s explore these fundamental components.

The vertical and horizontal lines in grids are akin to the skeleton for your design project, providing structure and organization. They’re the invisible building blocks of grids .

In simple terms, vertical lines divide your layout into columns, while horizontal ones create rows. These intersecting points become stopping points that help guide our eyes when navigating through content.

This structure isn’t rigid but fluid – think of it as an adaptable framework where you can manipulate space according to your needs.

If you’ve ever wondered how professional designers position text so precisely across pages or screens, say hello to hang lines. Hang lines act as anchors that keep all related elements aligned neatly – similar to red lines on writing paper at school.

Good web design, graphic designs, or even print projects use this technique effectively with different forms of content from headers to body copy remaining consistently positioned along these guiding ‘invisible’ rules. They ensure margins equal distance from edges lining up perfectly with each other leading towards clear visual balance giving readers less work decoding layouts more time enjoying what they read.

Have you ever experienced a musical composition that seemed to fit together seamlessly? That’s rhythm, and in the design world, baseline grids are your rhythm section. Baseline grids help designers position text on a page by providing horizontal lines called baselines where all lines of text sit.

This grid system ensures consistency between different elements like headings and body copy across pages or screens making sure they don’t dance off into disarray.

Loads of folks reckon the magic in top-notch designs is tucked away right under our noses.

Understanding grid layouts is like having the instructions to assemble furniture. Vertical and horizontal lines provide structure, while hang lines help align text precisely. Baseline grids give rhythm by ensuring consistency in text positioning, creating harmony between elements on a page or screen. Lastly, golden proportions can be that hidden magic bringing your design to life.

Hang lines and baselines are magical tools that can bring your design to life within a grid layout. Hang lines are imaginary lines that connect elements within a grid, creating a sense of connection and flow. They help guide the eye and create a visual hierarchy.

Baselines, on the other hand, are horizontal lines that align the bottoms of text elements. They create a sense of order and consistency, making your design look polished and professional. By aligning text elements to a baseline grid, you ensure that everything is visually aligned and easy to read.

Both hang lines and baselines work together to create a harmonious and visually pleasing design. They help you maintain consistency and balance within your grid layout, making it easier for users to navigate and understand your content.

When working with hang lines and baselines, it’s important to pay attention to the spacing between elements. Make sure there is enough breathing room between elements to avoid overcrowding and confusion. Creating adequate space between elements can give your design a neat, ordered look that’s pleasing to the eye.

By mastering spacing, understanding symmetry, and balancing visual elements within a grid layout, you can create effective and visually appealing designs. So go ahead, experiment with different types of layout designs and unleash the power of grids in your web and graphic design projects.

Real-World examples Of Effective Use Of Different Types of Layout Designs

In the world of design, grid layouts are like the secret ingredient in a chef’s special recipe. They may not be immediately noticeable but they’re essential to achieving an organized and visually appealing result.

Websites often utilize different types of layout designs to improve user experience and increase conversions. A good example is Apple’s website . Here, you’ll notice a symmetrical grid layout with clear columns that guide your eyes from top to bottom. This straightforward yet efficient strategy permits users to effortlessly pinpoint what they’re searching for without being overwhelmed.

An asymmetric layout, on the other hand, offers more creative freedom while still maintaining balance. The website for The Outline , uses this type effectively by dividing content into various shapes and sizes across their homepage. It gives off an unconventional vibe that aligns well with their brand image as a non-traditional news platform.

Moving onto print media, let’s look at how magazines use grids to organize elements in harmony. Vogue Magazine, a fashion staple known for its bold covers relies heavily on column grids which give structure while allowing room for stunning visuals – truly proof that design lies not just in beauty but also organization.

National Geographic, a publication synonymous with breathtaking photography uses modular grids masterfully. By creating spatial zones within each page spread it ensures each image gets due attention whilst delivering detailed narratives alongside them.

It’s like a ballet of components. The text, images and white spaces come together to create a harmonious reading experience.

Ever leafed through an IKEA catalog? You must’ve seen how they smartly use grids in their designs. Product descriptions line up just right with photos, forming neat rows and columns.

Grid layouts in design are like secret ingredients, crucial for achieving organized and visually appealing results. Whether it’s the symmetrical grids of Apple’s website or Vogue Magazine’s column grids, they guide users seamlessly through content. Meanwhile, asymmetric layouts like The Outline provide creative freedom while maintaining balance. It’s a harmonious dance of text, images, and white spaces.

FAQs in Relation to Type of Grids

The four main grid types are manuscript, column, modular, and hierarchical. Each serves a unique design purpose.

In graphic design, five common grid systems include manuscript, column, modular, baseline, and symmetric grids.

In most cases, you’ll find two: vertical (column) lines and horizontal (row) ones. But some designs also use diagonal or curved lines for added complexity.

Diverse layout styles encompass modular layouts with rows/columns forming cells; flexible multi-column structures; fixed layouts based on pixels; fluid models using percentages to scale with screen size.

Unlocking the magic of design lies in mastering the type of grids. We’ve seen how these unseen structures guide our designs, adding order to chaos.

From column and modular layouts perfect for newspapers or magazines to manuscript and baseline grids breaking down dense text into manageable pieces – each grid serves a purpose.

Spatial zones, hang lines, and stopping points are all part of this complex puzzle. And it’s not just about placing elements; remember that managing spaces within your layout is crucial too.

You’re now equipped with an understanding that can transform any chaotic design into a harmonious piece. So go ahead, and experiment with different types of layouts because every great design starts with a grid!

More from Design Tips

Sep 27, 2022

• Design Tips

Design systems: A beginner’s guide to building one that will last a lifetime

Nov 13, 2023

Exploring Adobe XD Examples: Real-World Success in Design

Dec 29, 2023

Maximizing Design Impact: Harnessing the Power of Grids

Nov 27, 2023

What are Grids? A Startup’s Guide to Effective Design

Stay informed.

Get design tips for your startup straight to your inbox by subscribing. Join our community!

CSS Tutorial

Css advanced, css responsive, css examples, css references, css grid layout module.

Try it Yourself »

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Browser Support

The grid properties are supported in all modern browsers.

Grid Elements

A grid layout consists of a parent element, with one or more child elements.

Advertisement

Display Property

An HTML element becomes a grid container when its display property is set to grid or inline-grid .

All direct children of the grid container automatically become grid items .

Grid Columns

The vertical lines of grid items are called columns .

The horizontal lines of grid items are called rows .

The spaces between each column/row are called gaps .

You can adjust the gap size by using one of the following properties:

The column-gap property sets the gap between the columns:

The row-gap property sets the gap between the rows:

The gap property is a shorthand property for the row-gap and the column-gap properties:

The gap property can also be used to set both the row gap and the column gap in one value:

The lines between columns are called column lines .

The lines between rows are called row lines .

Refer to line numbers when placing a grid item in a grid container:

Place a grid item at column line 1, and let it end on column line 3:

Place a grid item at row line 1, and let it end on row line 3:

All CSS Grid Properties

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Setting Up a Successful Grid Drawing

Let’s face it; drawing is a difficult concept to teach. Drawing takes a lot of practice, patience and students tend to get frustrated easily. How many times have you heard the phrase “I can’t draw” in your classroom? Probably too many times to count.

I help build students confidence by providing them drawing assignments where they can be successful. A strategy I use in my classroom is drawing with a grid. Using a grid helps break down the drawing into smaller sections. Chuck Close once said, “If you’re overwhelmed by the size of a problem, break it down into many bite sized pieces.”

Breaking the drawing into “bite sized pieces,” or small squares, helps students feel less overwhelmed.

The grid technique can be used to create drawings from a photo. The subject of the photo can vary. Some common subjects include animals, people, flowers, and landscapes. Using a grid from a photograph allows students to create an accurate and proportional drawing. Students focus on their observational skills while incorporating the mathematical skills of measuring, drawing straight lines, and proportion into their art.

Use these steps to create a grid drawing lesson plan.

1. choose a photograph..

When my students choose a photograph, I make sure I print them as a 4×6 photograph.

2. Choose a final piece of paper.

I use 8×12, double the size of the photograph.

3. Grid the photograph.

My students’ grid their 4×6 photograph into ½ inch by ½ inch squares.

4. Count the number of boxes in the photograph and the final paper to make sure they match.

5. number the boxes on the photograph and final paper..

Make sure the numbers coordinate. My students number 1-8 on the top row, and 1-12 on the left row.

6. Start drawing the contour lines of the photograph.

Be sure students are look at each individual box as they draw.

With these simple steps, your students are sure to be successful.

What are other “tricks of the trade” you have for drawing with a grid?

Magazine articles and podcasts are opinions of professional education contributors and do not necessarily represent the position of the Art of Education University (AOEU) or its academic offerings. Contributors use terms in the way they are most often talked about in the scope of their educational experiences.

Cassidy Reinken

Cassidy Reinken, an art educator, is a former AOEU Writer. She enjoys helping students solve problems and reach their potential.

No Wheel? No Problem! 5 Functional Handbuilding Clay Project Ideas Students Love

Love Letters: 3 Amazing Ways to Integrate Calligraphy, Cursive, and Typography

Embracing the Magic: A Love Letter to Pinhole Photography in the Art Room

A Love Letter to Yarn: 5 Reasons Why Art Teachers Are Obsessed

Creating Research Assignments

• Truisms/Best Practices
• Example Assignments

Research Guidance Grid for Assignment Design

• Library Instruction
• Related Literature

Ask a Question

Feel free to ask us a question by chatting, texting, emailing, calling, or stopping by the desk on the main floor of the library! Use the chat button below, or visit our " Ask a Question " page for more ways to contact the library.

There are four components to a guided research assignment:

• Clear expectations about source requirements
• A clear rationale and context for resource requirements
• Process-orientation
• Library engagement

The following tool utilizes these components to assist you in ensuring your research assignment handouts offer students clear and helpful research guidance. Research assignments that include effective guidance teach students to research like scholars and provide them with the tools and support to do so.  

Use this grid as you design or review your research assignments. Find the descriptions in the grid that most accurately describe your assignment to 1) determine if there might be opportunities to provide students with more effective guidance and 2) find examples of what that guidance might look like.

As the number increases along the horizontal axis, so does the level of research guidance.

Explanation/Definition of Sources and Expectations

Rational and context for resource requirements, process-orientation, library engagement.

" Research Guidance Rubric " by Pete Coco and Hazel McClure is licensed under CC Attribution-NonCommercial-ShareAlike 3.0 Unported License

• << Previous: Example Assignments
• Next: Library Instruction >>
• Last Updated: Aug 24, 2022 1:59 PM
• URL: https://libguides.bemidjistate.edu/c.php?g=1101840

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

SIDDARAMREDDY/react-grid-design-assignment-2

Folders and files, repository files navigation, react-grid-design-assignment-2, grid design.

HOVER EFFECT

Getting Started with Create React App

This project was bootstrapped with Create React App .

Available Scripts

In the project directory, you can run:

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes. You may also see any lint errors in the console.

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject , you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject . The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

You can learn more in the Create React App documentation .

To learn React, check out the React documentation .

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

• HTML 100.0%

• Share full article

Advertisement

Supported by

wordplay, the crossword column

Bread Spread

Step into the house of mirrors with Jeffrey Martinovic.

By Sam Corbin

Jump to: Today’s Theme | Tricky Clues

WEDNESDAY PUZZLE — Today’s crossword, by Jeffrey Martinovic, is a doozy, and it reminded me of a seemingly impenetrable puzzle featured in an episode of “The Simpsons”: Professor Provolone’s Picto-Puzzle, which Lisa finds on the back of her lunch kit. The normally sharp Lisa can’t solve the puzzle — and begins to doubt her own intelligence after Bart, Milhouse, Nelson and Martin solve it instantly.

I felt a lot like Lisa today, for a few reasons. First, I really was spiraling into despair as I hopelessly stared from this grid’s revealer to its theme entries and tried to make the connection: Had I lost my ability to solve crosswords altogether? When the trick finally clicked — as it tends to do after you stare angrily for long enough — it turned out to be similar to the solution of the Picto-Puzzle (which Lisa did eventually solve). I’ve included relevant scenes from the episode below, should you prefer to theorize about what Professor Provolone and Mr. Martinovic’s riddles have in common. Otherwise, read on to see what the theme is all about.

Today’s Theme

Toward the end of our numbered Across clues, we learn that a certain “Feature of this puzzle’s grid” also describes “the answers to the six starred clues” (62A). After solving HOITY-TOITY for “Highfalutin” (11D), I expected the theme might have something to do with rhyming reduplication (a process that leads to the creation of words such as hokeypokey, easy-peasy et al.). But other themed entries stymie that theory: At 4-Down, “Hold on, repeat that?” is WAIT, WHAT, and the “Calculus calculation” (46D) solves to a single word, MAXIMUM.

But look closely at the letters that make up those answers, and you’ll see that they all share LATERAL SYMMETRY (62A). This means that each letter featured in the themed entries can be split vertically in two halves mirroring each other. The grid, too, features strictly lateral — as opposed to rotational — symmetry, breaking with crossword convention .

Tricky Clues

37A. A bit of sports speak is required to untangle “Regulation followers, in brief”: The answer is OTS, short for overtimes, because “Regulation” refers to the regular course of play in a sports game.

51A. Some may say that tacking “spelled unusually” at the end of a clue excuses nonsensical words. But in the case of WOAH, the unusual spelling in question (meaning “Slow down!”), there is a longstanding debate about what constitutes correct orthography.

70A. It upsets me deeply to have learned, via this crossword, that there are two closely related terms for a “Bottomless pit”: an abyss and an ABYSM. As Merriam-Webster has observed , the adjective “abysmal” is more common than the noun ABYSM, and the noun “abyss” is more common than its adjective, “abyssal.” How’s that for a bit of reverse symmetry?

34D. Solvers of certain ages and television habits may have found it impossible to guess the “Celebrity whose middle name is Gail, appropriately enough.” The clue refers to the longstanding bond between OPRAH and Gayle King — a relationship that has been described in The New York Times as “the perfect friendship.”

35D. Another bit of crosswordese that one rarely encounters in everyday speech is LIMN, a verb that means to “Depict [something] in drawing” — usually portraits or illuminated manuscripts — and that has been traced to a Proto-Indo-European root meaning “light.”

60D. This “Host” isn’t showing you inside for a friendly cocktail: The clue refers to a large number, as in an ARMY.

Constructor Notes

Ever since I began solving crosswords many years ago, I have been fascinated by all the conventions we take for granted that are unbeknownst to most non-solvers. Some of my favorite puzzles, though, are ones that purposely subvert the solver’s expectations with well-thought-out justification. This puzzle began as my attempt to justify using mirror symmetry in place of typical crossword symmetry. Among the treasure-trove of puzzles that play on mirror symmetry, I was shocked to discover that none centered on symmetry of letter shapes. There is actually a surprising number of entries that fit the theme constraints, given the small set of symmetrical letters in the Roman alphabet, but the puzzle did not come together easily and required many iterations to come to fruition. I want to thank the editing team for sticking with me on it and helping me through the revision process. I hope you enjoyed solving the puzzle and have a great Wednesday!

Join Our Other Game Discussions

Want to be part of the conversation about New York Times Games, or maybe get some help with a particularly thorny puzzle? Here are the:

Spelling Bee Forum

Wordle Review

Connections Companion

Improve Your Crossword Solving

Work your way through our guide, “ How to Solve the New York Times Crossword .” It contains an explanation of most of the types of clues you will see in the puzzles and a practice Mini at the end of each section.

Want to Submit Crosswords to The New York Times?

The New York Times Crossword has an open submission system, and you can submit your puzzles online . For tips on how to get started, read our series “ How to Make a Crossword Puzzle .”

Still Reflecting?

Step through the looking-glass: Subscribers can take a peek at the answer key .

Trying to get back to the main Gameplay page? You can find it here .

Sam Corbin writes about language, wordplay and the daily crossword for The Times. More about Sam Corbin

It’s Game Time!

Take your puzzling skills in new directions..

WordleBot , our daily Wordle companion that tells you how skillful or lucky you are, is getting an upgrade. Here’s what to know .

The editor of Connections , our new game about finding common threads between words, talks about how she makes this daily puzzle feel fun .

We asked some of the best Sudoku  solvers in the world for their tips and tricks. Try them to  tackle even the most challenging puzzles.

Read today’s Wordle Review , and get insights on the game from our columnists.

We asked Times readers how they play Spelling Bee. The hive mind weighed in with their favorite tips and tricks .

Ready to play? Try Wordle , Spelling Bee  or The Crossword .

More From Forbes

Nyt ‘strands’ hints, spangram and answers for friday, april 26.

• Share to Facebook
• Share to Twitter
• Share to Linkedin

Today's NYT Strands hints and answers.

Looking for Thursday’s Strands hints, spangram and answers? You can find them here:

Hey there, everyone! Today is my last at-bat for Strands coverage for a couple of weeks . My colleague Paul Tassi will step up to the plate tomorrow. Hope you have a great weekend and that you don’t have too much trouble finding the theme words in the coming days.

In the meantime, today’s NYT Strands hints, spangram and answers are coming right up.

How To Play Strands

The New York Times’ Strands puzzle is a play on the classic word search. It’s in beta for now, which means it’ll only stick around if enough people play it every day.

There’s a new game of Strands to play every day. The game will present you with a six by eight grid of letters. The aim is to find a group of words that have something in common, and you’ll get a clue as to what that theme is. When you find a theme word, it will remain highlighted in blue.

You’ll also need to find a special word called a spangram. This tells you what the words have in common. The spangram links at least two sides of the board, but it may not start or end there. While the theme words will not be a proper name, the spangram can be a proper name. When you find the spangram, it will remain highlighted in yellow.

‘Challengers’ Reviews: Does Zendaya Tennis Movie Score With Critics?

‘baby reindeer’ star says real martha searches need to stop, patriots select north carolina quarterback drake maye with no 3 pick in nfl draft.

Every letter is used once in one of the theme words and spangram. You can connect letters vertically, horizontally and diagonally, and it’s possible to switch directions in the middle of a word. If you’re playing on a touchscreen, double tap the last letter to submit your guess.

If you find three valid words of at least four letters that are not part of the theme, you’ll unlock the Hint button. Clicking this will highlight the letters that make up one of the theme words.

Be warned: You’ll need to be on your toes. Sometimes you’ll need to fill the missing word(s) in a phrase. On other days, the game may revolve around synonyms or homophones. The difficulty will vary from day to day, and the puzzle creators will try to surprise you sometimes.

What Is Today’s Strands Hint?

Scroll slowly! Just after the hint for today’s Strands puzzle, I’ll reveal what the answer words are.

The official theme hint for today’s Strand puzzle is...

Staff members

Need some extra help? Here’s another hint...

There are eight words to find today, including the spangram.

What Are Today’s Strands Answers?

Spoiler alert! Don’t scroll any further down the page until you’re ready to find out today’s Strands answers.

I’ll first tell you the spangram and show you where that is on the grid. I’ll then tell you the other words and show you how they fit in.

This is your final warning!

Today’s Strands spangram is...

Here’s where you’ll find it on the grid...

New York Times Strands screenshot, showing the highlighted term NOTATION.

The rest of today’s Strands theme words are...

Here’s what the completed grid looks like...

Completed Strands grid for April 26 featuring the words SIGNATURE, REST, NOTATION, FLAT, MEASURE, ... [+] CLEF, SHARP and NATURAL.

I thought SINGER in the top left might have been a theme word, because hey, that's a job. I figured I might as well unlock a hint, so SIGN and SIRE gave me the letters for FLAT. Hmmm. So, we're probably not looking for literal members of staff here.

Back to the drawing board. SING, SIRS and SAINT (all still in that top-left corner) opened up CLEF. So, musical notation it is. Sure enough, I found the spangram next, followed by NATURAL.

It's been a long time since I looked at any musical notation (I tried keyboards as a youngster but later took up guitar and relied on tabs), so I needed some help. TRUE, MUTE and EASE gave me the letters for REST, but not before TRES and ERST brought me two-thirds of the way to my next hint.

MANI gave me another hint and the letters for SHARP in the bottom left. I should have gotten that one. FANE on the right, followed by FIST and SOFA gave me MEASURE. That left me with SIGNATURE to wrap things up.

Not an ideal way for me to close out my week on the Strands ones and twos, but I had fun all the same. I used a whopping five hints and the spangram was the third theme word I found.

That’s all there is to it for today’s Strands clues and answers. Be sure to check Paul’s blog for hints and the solution for Saturday’s game if you need them.

• Editorial Standards
• Reprints & Permissions