Seven Ways You Can Place Elements Using CSS Grid Layout

Share this article

Placing elements using Grid Layout module
Placing elements using Grid Layout module

This article was updated on 23rd March, 2017. Specifically: browser support for CSS Grid Layout.

In this article, we are going to learn seven ways in which you can place elements in a web page using the Grid Layout module.

Previously, SitePoint published Introducing the CSS Grid Layout. Recently, I also wrote Where Things Are at in the CSS Grid Layout Working Draft.

Here, the focus will be entirely on specific ways in which you can lay out elements on the web using CSS Grid. Now, let’s go over each one of them.

Addressing Browser Support for Grid Layout

At this time, Grid Layout doesn’t yet have consistent browser support. However, as of March 2017, both latest versions of Chrome and Firefox browsers have been released with CSS Grid Layout support by default. IE still supports the old implementation, Opera needs the Experimental Web Platform flag turned on, and Safari has no support at all. To properly work with all the examples in this article, I suggest you use either Chrome or Firefox. For readers who for some reason find it problematic to use these browsers, I have added a screenshot to show the final result of each technique.

#1 Specifying Everything in Individual Properties

CSS Grid Layout-Specifying Everything in Individual Properties Example

This is the version we have been using to place the elements in our previous articles. This method is verbose but easy to understand. Basically, the left/right and top/bottom bounds of an element are specified using grid-column-start/grid-column-end and grid-row-start/grid-row-end properties. If an element is only going to span one row or column, you can omit the -end properties, this way you will have to write a little less CSS.

In the demo below, element A has been placed in the second row and second column using the following CSS:

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

The same effect could be achieved by using:

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

See the Pen Specifying Everything in individual Properties by SitePoint (@SitePoint) on CodePen.

#2 Using grid-row and grid-column

CSS Grid Example Using grid-row and grid-column

Even though the CSS in our first example was readable and easy to understand, we had to use four different properties to place a single element. Instead of using four properties, we can just use two — grid-column and grid-row. Both these properties will take two values separated by a slash where the first value will determine the start line and the second value will determine the end line of our element.

Here is the syntax you need to use with these properties:

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

To place item C in the bottom right corner of our grid, we can use the following CSS:

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

See the Pen Using grid-row and grid-column by SitePoint (@SitePoint) on CodePen.

#3 Using grid-area

CSS Grid - Example Using grid-area

Technically, the item we are laying out covers a specific area of the webpage. The boundary of that item is determined by the values we provide for the grid lines. All of these values can be supplied at once using the grid-area property.

This is what your CSS would look like when using this property:

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

If you have trouble remembering the correct order of these values, just keep in mind that first you have to specify the position of the top-left ( row-startcol-start ) corner and then the bottom-right ( row-endcol-end ) corner of your element.

Just like the previous example, to place item C in the bottom right corner of our grid, we can use the following CSS:

.c {
  grid-area: 2 / 2 / 4 / 4;
}

See the Pen Using grid-area by SitePoint (@SitePoint) on CodePen.

#4 Using the span Keyword

CSSGrid-Example Using the span Keyword with Grid Lines

Instead of specifying the end line while laying out elements, you can also use the span keyword to set the number of columns or rows a particular element will span.

This is the proper syntax when using the span keyword:

.selector {
  grid-row: row-start / span row-span-value;
  grid-column: col-start / span col-span-value;
}

If your element spans across only one row or column you can omit both the span keyword and its value.

This time let’s place item C in the top left corner of our grid. We can use the following CSS to do so.

.c {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

See the Pen Using span with grid lines by SitePoint (@SitePoint) on CodePen.

#5 Using Named Lines

CSSGrid-Example with Named Lines

Until now, we have been using raw numbers to specify grid lines and it is easy to use when we are working with simple layouts. However, when you have to place several elements, it can get a bit confusing. Most of the times, an element on your page will fall under a specific category. For example, the header may go from column line c1 to column line c2 and from row line r1 to row line r2. It would be a lot easier to properly name all the lines and then place your elements using these names instead of numbers.

Let’s create a very basic layout to make the concept clearer. First, we will have to modify the CSS applied to our grid container:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [head-col-start] 180px [content-col-start] 180px [content-col-mid] 180px [head-col-end];
  grid-template-rows: [head-row-start] auto [head-row-end] auto [content-row-end] auto [footer-row-end];
}

What I have done above is assign names to all the lines based on the type of content that they will enclose. The idea here is to use names that provide us with some insight into the placement of different elements. In this particular example, our header element spans across all the columns. Therefore, assigning the name “head-col-start” and “head-col-end” to the first and last column line respectively will make it clear that these lines represent the left and right end of our header. All other lines can be named in a similar fashion. After all the lines have been named, we can use the following CSS to place all our elements.

.header {
  grid-column: head-col-start / head-col-end;
  grid-row: head-row-start / head-row-end;
}

.sidebar {
  grid-column: head-col-start / content-col-start;
  grid-row: head-row-end / content-row-end;
}

.content {
  grid-column: content-col-start / head-col-end;
  grid-row: head-row-end / content-row-end;
}

.footer {
  grid-column: head-col-start / head-col-end;
  grid-row: content-row-end / footer-row-end;
}

Although we had to write more CSS than usual, now just looking at the CSS will give us an idea of where an element is located.

See the Pen Using Named Lines by SitePoint (@SitePoint) on CodePen.

#6 Using Named Lines with a Common Name and the span Keyword

CSSGrid-Example with Named Lines and the span Keyword

In the previous method, all lines had different names marking the starting, midpoint or the end of an element. For example, “content-col-start” and “content-col-mid” marked the starting and mid point of the content section of our webpage. If the content section covered a few more rows, we would have to come up with additional line names like “content-col-mid-one”, “content-col-mid-two” and so on.

In situations like these, we can just use a common name like “content” for all grid lines of our content section and then use the span keyword to specify how many of those lines an element spans. We can also just mention a number along with the line name to set the number of rows or columns an element would span.

Using this method, the CSS would look like this:

.selector {
  grid-row: row-name row-start-number/ row-name row-end-number;
  grid-column: col-name col-start-number / span col-name col-to-span;
}

Like the last method, this one also requires you to modify the CSS of your grid container.

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px;
  grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto;
}

Each of the named column lines has the same name representing their width in pixels and each named row line represents the rows covered by a specific section of the webpage. In this demo, I have introduced an advertisement section just under the sidebar. Here is the CSS:

.header {
  grid-column: one-eighty 1 / one-eighty 4;
  grid-row: head-row / content-row 1;
}

.sidebar {
  grid-column: one-eighty 1 / one-eighty 2;
  grid-row: content-row 1 / content-row 2;
}

.advert {
  grid-column: one-eighty 1 / one-eighty 2;
  grid-row: content-row 2 / content-row 3;
}

.content {
  grid-column: one-eighty 2 / one-eighty 4;
  grid-row: content-row 1 / span content-row 2;
}

.footer {
  grid-column: one-eighty 1 / span one-eighty 3;
  grid-row: content-row 3 / footer-row;
}

See the Pen Using Named Lines with Span by SitePoint (@SitePoint) on CodePen.

#7 Using Named Grid Areas

CSSGrid-Example with Named Grid Areas

Instead of using lines, we can also place elements by assigning names to different areas. Again, we will have to make some changes to the CSS of our grid container.

The CSS for our container should now look like this:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 180px  180px  180px;
  grid-template-areas:  "header  header   header"
                        "content content  advert"
                        "content content  ......"
                        "footer  footer   footer";
}

A single dot (.) or a sequence of dots will create an empty cell with nothing in it. All the strings need to have the same number of columns. That’s why we had to add the dots instead of leaving it completely blank. For now, the named grid area can only be rectangular. However, this may change in future versions of the spec. Let’s take a look at the CSS of all our elements.

.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.advert {
  grid-area: advert;
}

.footer {
  grid-area: footer;
}

Once you have defined all the grid areas, assigning them to various elements is pretty straightforward. Keep in mind that you can’t use any special characters while assigning names to areas. Doing so will make the declaration invalid.

See the Pen Using Named Grid Areas by SitePoint (@SitePoint) on CodePen.

Conclusion

That’s it! We have covered seven different methods of laying out elements using the CSS grid layout. Is there any tip that you would like to share with other readers regarding this article? Which of these methods would you prefer to use in your own projects? Let us know in the comments.

Frequently Asked Questions on CSS Grid Layout

What is the difference between CSS Grid Layout and Flexbox?

CSS Grid Layout and Flexbox are both powerful layout systems in CSS. While they may seem similar, they are designed for different types of layout tasks. Flexbox is a one-dimensional layout model, and it is designed for layout in a single dimension at a time, either a row or a column. On the other hand, CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows simultaneously, making it ideal for designing complex web layouts.

How can I create a responsive layout with CSS Grid?

CSS Grid makes creating responsive layouts quite straightforward. You can use the ‘fr’ unit, which represents a fraction of the available space in the grid container. By using this unit, you can create flexible grid tracks that resize based on the viewport size. Additionally, you can use media queries to change the grid layout at different viewport sizes, providing more control over the responsive design.

Can I use CSS Grid and Flexbox together?

Yes, CSS Grid and Flexbox can be used together in a layout. They complement each other well. For instance, you could use CSS Grid to layout the overall page structure, and then use Flexbox for the layout of individual components or sections within the grid areas.

How can I align items in a CSS Grid?

CSS Grid provides several properties for aligning items, including ‘justify-items’, ‘align-items’, ‘justify-self’, and ‘align-self’. These properties control the alignment of grid items along the row and column axes. You can align items to the start, end, center, or stretch them to fill the grid area.

What are grid lines in CSS Grid Layout?

In CSS Grid Layout, grid lines are the dividing lines that make up the structure of the grid. They can be horizontal or vertical and are numbered starting from 1. You can position grid items between any two lines, giving you a lot of flexibility in your layout design.

How can I create a gap between grid items?

CSS Grid provides the ‘gap’ property (formerly ‘grid-gap’), which you can use to create space between grid items. This property can take one or two values, specifying the size of the gap between rows and columns.

What is the ‘grid-template-areas’ property in CSS Grid?

The ‘grid-template-areas’ property in CSS Grid allows you to create a grid layout by referencing named grid areas. You can define these areas using the ‘grid-area’ property on grid items, and then arrange them visually in your CSS code using the ‘grid-template-areas’ property.

How can I overlap grid items in CSS Grid?

In CSS Grid, you can easily overlap grid items by placing them into the same grid cell or by specifying a grid area that covers multiple cells. This can be done using the ‘grid-column’ and ‘grid-row’ properties on the grid items.

What is the ‘fr’ unit in CSS Grid?

The ‘fr’ unit in CSS Grid stands for ‘fraction’. It represents a fraction of the available space in the grid container. This unit allows you to create flexible grid tracks that resize based on the available space, making it easier to create responsive layouts.

Is CSS Grid widely supported in modern browsers?

Yes, CSS Grid is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer. If you need to support IE, you may need to use a fallback layout method, such as Flexbox or float-based layouts.

Nitish KumarNitish Kumar
View Author

I am a front-end developer who has a keen interest in working with various libraries and reading about latest developments in my field. I also publish a list of most popular web development articles of the week every Tuesday on the website Freadio.

AdvancedCSScss gridcss grid layoutmariap
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week