---
title: "A Very, Very In-Depth Guide on CSS Grid | CoderPad"
description: "Seriously, everything you ever wanted to know about CSS Grid is in this guide."
canonical: "https://coderpad.io/blog/development/a-very-very-in-depth-guide-on-css-grid/"
last_modified: "2026-04-15 16:22:33"
---
[Back to blog](https://coderpad.io/blog/)
# A Very, Very In-Depth Guide on CSS Grid
September 16, 2022 28 Minute Read
By Victor Ikechukwu
[Development](https://coderpad.io/blog/development/)
As websites progressed from simple documents into complex, interactive applications, web developers have utilized multiple approaches to organize and control the layout of UI elements on a webpage:
- Floating elements around the webpage with the [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) to
- Inserting elements into [an HTML table elemen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) t to create a table-based layout
- Positioning elements [using the position property](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
- Using the [Flexible box layout (Flexbox)](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to align content on the page.
While these techniques enable us to organize and control the layout of elements on a webpage, they are not always sustainable, as some lead to performance bottlenecks. For example:
- Floats affect a web page’s SEO.
- Table-based layouts lead to non-semantic markup on our sites, compromising [accessibility](https://coderpad.io/blog/development/introduction-to-web-accessibility-a11y/).
- Positioning elements require using CSS hacks.
Enter CSS Grid.
CSS Grid is a layout system—a method of organizing elements on a webpage—used for building two-dimensional layouts. It is a structure made up of intersecting horizontal and vertical lines known as grid lines that divide the layout of an HTML element into rows and columns.
CSS Grid is a powerful tool that enables web developers to define the position of HTML elements and control how the elements would span horizontally and vertically across the page—a feat that cannot be achieved using other layout systems.
This article is a comprehensive guide for everything you need to know about the CSS Grid layout system.
In this article, we’ll go over:
- [The CSS Grid vocabulary](#grid-vocab)
- [How to make a basic grid](#make-basic-grid)
- [Inserting gutters between grid elements](#insert-gutters)
- [Aligning grid items horizontally](#align-horizontal)
- [Aligning grid items vertically](#align-vertical)
- [Measurement units introduced with the CSS Grid layout](#grid-measurement-units)
- [Useful CSS functions you should utilize when working with CSS Grid](#useful-css-functions)
- [Expanding grid items across multiple grid lines](#expand-grid-items)
- [Syntax to shorten the amount of CSS you need to type](#css-shorthand)
## The CSS Grid vocabulary
CSS Grid introduces a few new concepts you should familiarize yourself with before diving into its usage.
Grid container: The HTML element on which the grid layout is applied.
A grid container is what holds the grid itself. If the grid constructs a box, then the container makes up the corners of the box.
Grid item(s): All direct child elements of the grid container.
Grid line: These are the horizontal and vertical dividing lines that make up the structure of the grid. These lines reside on either side of a column (column grid lines) or row (row grid lines). Hence, a grid with four columns will have five column lines, with one after the last column.
Grid lines are the horizontal and vertical dividers (lines) that separate grid items into a grid
Grid cell: The space between two column grid lines and two adjacent row grid lines, also known as grid tracks. It is a single unit of a grid and the smallest unit possible. By default, all grid items are laid out one item per grid cell.
A grid cell is the space between adjacent grid lines. Think of them as smaller boxes that construct the larger grid system.
Grid track: The area between two adjacent grid lines. The gap between two grid row lines is a row track, and the gap between two grid column lines is a column track. The size of a grid track determines the width and height of our grid items.
A grid track is the area between two adjacent grid lines. Horizontal grid tracks are known as rows, and vertical grid tracks are known as columns.
Grid area: A rectangular area on the grid made up of one or more grid cells. Grid areas are created when a grid item spans over one-to-many grid tracks. They must be rectangular; creating a T- or L-shaped grid area is impossible.
A grid area is a rectangular area on the grid and can consist of something as small as one cell, or as big as the entire grid.
Now, without further ado, let’s dive in!
## How to make a basic grid
To create a CSS Grid layout, you’ll first need to define a grid container. The grid container can be any individual parent element (for example, a div).
To define a grid container, pass [the`display`property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with either a value of`grid`or`inline-grid`to an element’s style block. Doing this will implicitly convert all direct child elements of the grid container into grid items.
```
.block-level-grid-container {
display: grid;
}
.inline-level-grid-container {
display: inline-grid;
}
Code language: CSS (css)
```
The value`grid`makes the parent grid element act a bit like an un-styled`div`, making it span the full width of a page by default due to them being block-level elements. In contrast, the value`inline-grid`behaves much like an un-styled`span`, making it act like an inline element to its siblings.
Let’s look at an example.
```
Code language: HTML, XML (xml)
```
In the code block above, we define a`div`with a class of`"container"`. Within the`div`are four child elements.
We can now set the`div`as a grid container.
```
.container {
display: grid;
}Code language: CSS (css)
```
The result:
The four elements are stacked on top of one-another vertically.
Setting an element to a grid container alone will not immediately affect how the child elements are displayed, as we still haven’t specified how the layout should look. Hence, CSS lays out the grid items in a single-column grid.
To change the layout of the grid items within a grid, we must explicitly define the rows and columns we want our grid to have. To do that, we’ll use the CSS properties`grid-template-columns`and`grid-template-rows`.
### Grid Template Columns
The`grid-template-columns`property lets us specify the number of columns we want in a grid container and how wide each column should be.
The`grid-template-columns`property accepts one or more non-negative [CSS length unit](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths) values. The number of CSS-length values passed to the property specifies how many columns our grid container will have, and each value represents how wide each column (i.e., each grid track) would be.
For example:
```
.container {
display: grid;
grid-template-columns: 400px 400px 400px;
}Code language: CSS (css)
```
The result:
Because there are three columns, with four items, there will be two rows. The top row will have 1, 2, and 3 split into thirds, each 400px wide. The bottom row will have a 400px wide 4 element.
In the example above, we use the grid-template-columns property to change the layout of our grid container to be divided into three columns, each`400px`wide.
Notice that the last grid item starts on a new row below the first three columns. That is because we only specified three columns that are each`400px`wide. Consequently, when the number of grid items in the grid container exceeds three, CSS will wrap other grid items into new rows to maintain the container’s layout.
>
 You can’t assign negative values to the CSS properties associated with the grid layout. Passing a value such as`-400px`to the grid-template-columns property will not affect the structure of a grid.
### Grid Template Rows
The`grid-template-rows property`lets us specify the height of each row in a grid container.
Unlike the`grid-template-columns`property, it doesn’t specify the number of rows our grid container should have. It only sets the height of each row. Such behavior occurs because a grid container will implicitly create a new row whenever grid items wrap into new lines. Hence, we can’t control the number of rows that should be present in a grid using the`grid-template-rows`property.
The`grid-template-rows`property accepts one or more non-negative [CSS length](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths) values where each value represents the height of each row in a grid container, from the first to the last.
For example:
```
.container {
display: grid;
grid-template-columns: 400px 400px 400px;
grid-template-rows: 100px 200px;
}Code language: CSS (css)
```
In the code above, values of`100px`and`200px`are passed to the grid-template-rows property. This gives the first row in the grid container a height of`100px`and the second row a height of`200px`.
The result:
Four elements with numbers inside of them are divided into a grid. There are two rows in this grid; the first is 100px tall, while the second is 200px high.
In the code above, the`grid-template-rows`property sets only the heights of the first two rows in the grid container. If we are to add more grid items to the grid container and it creates new rows to wrap them onto, the heights of these implicitly created rows will not be determined by the`grid-template-rows`property but by the size of their content.
A grid that contains twelve items and is split into three columns will create four rows. The first row is 100px high, the second is 200px, and the third and fourth are only as tall as the element’s contents.
## Adding a gap between rows and columns
Adding more rows and columns to a grid container without properly spacing them apart would make the grid look too jam-packed and not helpful as a layout system. We can add gutters (spacing) between columns and rows to space them apart by adjusting the size of our grid lines. Let’s explore how we can do that.
### column-gap
The`column-gap`property adds some spacing between columns by adjusting the width of the vertical grid lines in a grid container. It accepts a non-negative CSS length value which defines how broad the grid line between each column will be.
For example:
```
.container {
display: grid;
column-gap: 28px;
}Code language: CSS (css)
```
The code above sets the width of every vertical (column) grid line in the grid container to`28px`. This adds a space of`28px`between every column in the grid.
The result:
With three columns inside of a grid, there is now a 28 pixels gap to separate each column within the grid. The rows do not have a gap, as one has not yet been specified.
### row-gap
Just like`column-gap`, the`row-gap`property adds some spacing between rows in a grid container by adjusting the height of all horizontal grid lines in a grid container. It accepts a non-negative CSS length value which defines how large the grid line between each row will be.
For example:
```
.container {
display: grid;
column-row: 40px;
}Code language: CSS (css)
```
The code above sets the height of every horizontal (row) grid line in the grid container to`40px`. This adds a distance of`40px`between every row in the grid.
The result:
There are two rows in this column, with a 40px gap between them.
We can combine the`column-gap`and`row-gap`properties to space our columns and rows.
```
.container {
display: grid;
column-row: 40px;
row-gap: 20px;
}Code language: CSS (css)
```
The result:
A grid with rows and columns and a 20px of spacing between cells specified with the aforementioned CSS
Using just a few lines of CSS, we have created a grid layout with all the basic CSS Grid properties such as columns, rows, and gutters.
## How to align content horizontally
CSS Grid exposes six properties that let us control the alignment of grid items along the [rows (inline axis) or columns (block axis)](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis) of a grid container. In this section, we’ll go over each property that aligns grid items horizontally along the columns of the grid container.
### justify-items
The`justify-items`property controls the alignment of all grid items along a grid container’s inline (column) axis. It is passed to the grid container, and its value applies to all grid items within the grid. It accepts four possible values.
- start — aligns grid items to the beginning of all columns, which is the left edge of their cell.
For example:
```
.container {
justify-items: start;
}Code language: CSS (css)
```
Items in the container are aligned to the left of the cell
- end — aligns grid items to the end of all columns, which is the right edge of their cell.
For example:
```
.container {
justify-items: end;
}Code language: CSS (css)
```
Items in the container are aligned to the right of the cell.
- center — places all grid items at the center of their cells.
For example:
```
.container {
justify-items: center;
}Code language: CSS (css)
```
Items in the container are aligned to the center of the cell, with space on both sides.
- stretch — will stretch out the grid items to fill the whole width of their cells: this is the default value of the justify-items property.
For example:
```
.container {
justify-items: stretch;
}Code language: CSS (css)
```
Items in the container take up the entire space of the cell.
### justify-content
The`justify-content`property lets you set the horizontal alignment of the entire grid within the inline (row) axis of the grid container. It accepts seven possible values.
- start — aligns the entire grid to the left edge of the grid container.
For example:
```
.container {
justify-content: start;
}Code language: CSS (css)
```
- end — aligns the entire grid to the right edge of the grid container.
For example:
```
.container {
justify-content: end;
}Code language: CSS (css)
```
- center — places the entire grid horizontally at the center of the grid container.
For example:
```
.container {
justify-content: center;
}Code language: CSS (css)
```
- stretch — resizes the grid items to allow the grid to fill the entire width of the grid container: this is the default value of the justify-content property.
For example:
```
.container {
justify-content: stretch;
}Code language: CSS (css)
```
- space-around — adds an even amount of space between each grid item, with half-sized spaces on both ends of the grid.
For example:
```
.container {
justify-content: space-around;
}Code language: CSS (css)
```
- space-between — creates an even amount of space between each grid item, with no space at the ends of the grid.
For example:
```
.container {
justify-content: space-between;
}Code language: CSS (css)
```
- space-evenly — puts an even amount of space between each grid item and on both ends of the grid.
For example:
```
.container {
justify-content: space-evenly;
}Code language: CSS (css)
```
### justify-self
This behavior of the`justify-items`property that controls the alignment of grid items along the inline (row) axis of a grid container can also be set on individual grid items via the`justify-self`property. This property is passed to the grid items. It accepts four possible values.
- start — aligns a grid item to the beginning of a column, which is the left edge of its cell.
For example:
```
.box-1 {
justify-self: start;
}Code language: CSS (css)
```
The first item in the grid is aligned to the left of the cell space, while all of the other items stretch to fill the cell area.
- end — aligns the grid item to the end of a column, which is the right edge of its cell.
For example:
```
.box-2 {
justify-self: end;
}Code language: CSS (css)
```
The second item in the grid is aligned to the right of the cell space, while all of the other items stretch to fill the cell area.
- center — places the grid item at the center of its cell.
For example:
```
.box-3 {
justify-self: center;
}Code language: CSS (css)
```
The third item in the grid is aligned to the center of the cell space, while all of the other items stretch to fill the cell area.
- stretch — will stretch out the grid item to fill the entire cell width; this is the default value of the`justify-self`property.
For example:
```
.box-4 {
justify-self: stretch;
}Code language: CSS (css)
```
The fourth grid item, like all grid items in the grid, is stretched to take up the full horizontal space of the grid cell
## How to align content vertically
Now let’s look at the properties that align grid items vertically along the rows of the grid container.
### align-items
The`align-items`property controls the alignment of all grid items along a grid container’s block (column) axis. It is passed to the grid container, and its value applies to all grid items within the grid. It accepts four possible values.
- start — places all grid items at the top of all rows.
For example:
```
.container {
align-items: start;
}Code language: CSS (css)
```
The items in the grid are aligned to the top of the cell space.
- end — places all grid items at the bottom of all rows.
For example:
```
.container {
align-items: end;
}Code language: CSS (css)
```
The items in the grid are aligned to the bottom of the cell space.
- center — places all grid items at the center of their cells.
For example:
```
.container {
align-items: center;
}Code language: CSS (css)
```
The items in the grid are aligned to the vertical center of the cell space.
- stretch — will stretch out all grid items to fill the entire height of their cells; this is the default value.
For example:
```
.container {
align-items: stretch;
}Code language: CSS (css)
```
The items in the grid are stretched to take up the full vertical space of the cell space.
### align-content
The`align-content`property lets you set the vertical alignment of the entire grid within the block (column) axis of the grid container. It accepts seven possible values.
- start — aligns the entire grid to the top of the grid container.
For example:
```
.container {
align-content: start;
}Code language: CSS (css)
```
Grid items spaced near the top of the grid. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center).
- end — aligns the entire grid to the bottom of the grid container.
For example:
```
.container {
align-content: end;
}Code language: CSS (css)
```
Grid items spaced near the bottom of the grid. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center).
- center — places the entire grid vertically at the center of the grid container.
For example:
```
.container {
align-content: center;
}Code language: CSS (css)
```
Grid items spaced in the center of the grid. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center).
- stretch — The grid items stretch to fill the full height of the container grid; this is the default value.
For example:
```
.container {
align-content: stretch;
}Code language: CSS (css)
```
Grid items stretched evenly across the grid. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center).
- space-around — creates an even amount of space between each grid item, with half-sized spaces on both ends of the grid.
For example:
```
.container {
align-content: space-around;
}Code language: CSS (css)
```
Grid items spaced with top and bottom spacing each half the size of the middle spacing. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center)
- space-between — adds an even amount of space between each grid item, with no space at the ends of the grid.
For example:
```
.container {
align-content: space-between;
}Code language: CSS (css)
```
Grid items have large space in the vertical-middle. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center).
- space-evenly — places an even amount of space between each grid item and on both ends of the grid.
For example:
```
.container {
align-content: space-evenly;
}Code language: CSS (css)
```
Grid items have even spaces in the spaces between them. Image captured with help of [W3 Schools](https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center).
### align-self
This behavior of the`align-items`property that controls the alignment of grid items along the block (column) axis of a grid container can also be set on individual grid items via the`align-self`property. This property is passed to the grid items. It accepts four possible values.
- start — places a grid item at the top of its cell.
For example:
```
.box-4 {
align-self: start;
}Code language: CSS (css)
```
The fourth item in the grid is aligned to the top of the cell space, while all of the other items stretch to fill the cell area.
- end — places a grid item at the bottom of its cell.
For example:
```
.box-5 {
align-self: end;
}Code language: CSS (css)
```
The fifth item in the grid is aligned to the bottom of the cell space, while all of the other items stretch to fill the cell area.
- center — places a grid item at the center of its cells.
For example:
```
.box-6 {
align-self: center;
}Code language: CSS (css)
```
The sixth item in the grid is aligned to the vertical center of the cell space, while all of the other items stretch to fill the cell area.
- stretch — will stretch out the grid item to fill the entire height of its cell; this is the default value.
For example:
```
.box-1 {
align-self: stretch;
}Code language: CSS (css)
```
The first grid item, like all grid items in the grid, is stretched to take up the full vertical space of the grid cell.
## Introducing new measurement units
Aside from non-negative [CSS length](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages) values such as`px`,`rem`,`vw`, and percentages (`%`), you can also use special sizing units and keywords to control the size of grid items in a grid.
### The fractional (fr) unit
The`fr`unit, short for “fractional,” is a length unit introduced with the CSS Grid layout. It represents a fraction of the free space available in a grid container. This makes it the ideal unit for defining responsive columns and rows that will scale as the browser’s viewport shrinks and grows.
Let’s look at an example to explain how helpful the`fr`unit is and why it’s a better alternative to other CSS length units.
Say we are to create a grid layout made up of three columns where the first column takes up 1/6 of the grid’s width, the second column takes up twice the width of the first column, and the third column takes up three times the width of the first column.
If we weren’t using the`fr`unit in the example above, we’d have to perform some math on our end. We had to figure out the total width of the grid (100%), divide that by 6, then multiply whatever the result is by how wide each column should span, which would be:
- width of first column = 100% / 6 * 1 —> 15%
- width of second column = 100% / 6 * 2 —> 30%
- width of third column = 100% / 6 * 3 —> 45%
As the layout becomes more complex, using percentages or any [CSS math function](https://coderpad.io/blog/development/an-overview-of-five-css-math-functions/) becomes unsustainable. This is when the`fr`unit comes in handy.
The`fr`unit tidies all this by letting us specify how the available space in a grid container should be distributed among its rows and columns. Then it spreads the space available in that order.
```
.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}Code language: CSS (css)
```
In the code above, we assign a fraction of the available space in a grid container to the first column, then twice to the second column, and thrice to the third column.
The result:
A grid that consists of three columns and two rows. The first column is one-third the size of the last column and half the size of the second column.
### min-content
The`min-content`is a sizing keyword that sets the width of a grid track to its [intrinsic minimum width](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size), which is usually the size of the smallest content or text within its grid items. It works similarly [to the CSS function`min`](https://coderpad.io/blog/development/an-overview-of-five-css-math-functions/#min), but is used as a spacing unit instead of a function.
When applied to a column or row, they become as narrow as the longest word in their track. This lets you get the shortest measurement of the content inside the grid items.
For example:
```
.container {
display: grid;
grid-template-columns: 1fr min-content 1fr;
}Code language: CSS (css)
```
In the code above, we set the first and third columns to be as wide as a fraction of the grid container while passing the`min-content`to the second column, making it shrink to the size of the words in its grid items.
The result:
A grid with three columns. The middle column only takes up the smallest amount of space needed to display a single character, while the first and last columns take up all remaining space.
### max-content
The`max-content`sizing keyword has the opposite effect of`min-content`;`max-content`behaves similarly to [a CSS function:`max()`](https://coderpad.io/blog/development/an-overview-of-five-css-math-functions/#max). When applied to either a column or row, the track becomes as wide as possible for all the content within the grid items to display in one long unbroken line.
The most significant benefit of using`max-content`is that you can let the content within our grid items breathe and spread out rather than wrapping them into new lines, which causes vertical text overflows.
For example:
```
.container {
display: grid;
grid-template-columns: 1fr max-content 1fr;
}Code language: CSS (css)
```
The code above defines three columns and sets the width of the second column to the`max-content`keyword. If we add a lot of words to the grid items in the second column, the text in these grid items won’t overflow. Instead, the width of the second column will grow, and the first and third columns will shrink to accommodate it.
The result:
A grid with three columns. The middle column has a sentence that’s not broken into newlines, but rather stretches to fill as much space as it needs and no more. The first and last columns take up all remaining space.
## Useful CSS functions to combine with CSS Grid
When working with the CSS Grid layout, there are a few handy functions you should familiarize yourself with to help increase the efficiency of your CSS.
### repeat()
The`repeat()`function lets us define recurring unit declarations for our grid container’s rows or columns in a more compact form.
For example, suppose you repeat unit declarations when defining columns or rows using the`grid-template-rows`and`grid-template-column`properties. You can use the`repeat()`function to declare these recurring patterns more concisely.
The function takes two arguments:
- repeat count: this is an integer value of 1 or higher, or the keyword values [auto-fill](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#auto-fill) or [auto-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#auto-fit). It specifies the number of times the recurring pattern of the rows or columns should repeat.
- track(s) definition: this is where we specify the recurring pattern of rows or columns to repeat. We can pass one or more non-negative length values to it, where each value represents the size of a row or column.
Essentially, its syntax is this:
`repeat(, );`
Say we want to create a grid with six equal columns. Without the`repeat()`function, we’d have to explicitly define each column using the grid-template-columns property.
```
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}Code language: CSS (css)
```
However, as the number of columns increases, this approach becomes unsustainable and verbose. We can rewrite this into a more compact form using the`repeat()`function.
```
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
}Code language: CSS (css)
```
Here we use the`repeat()`function to create a column that spans over a fraction of our grid container, repeating the process six times. This drastically reduces the number of repetitive unit declarations in our CSS.
The result:
Six evenly spaced items in a row.
### minmax()
When defining a responsive grid layout, you likely want to give each grid track a minimum and maximum size to ensure that they scale up and down to fit their content as the viewport resizes. This is where the`minmax()`property comes in handy.
The`minmax()`function lets us specify a minimum and maximum size for a grid track. As the grid is resized across viewports, the grid track will grow and shrink across that range. On smaller screens, it will shrink until it reaches the minimum size. And on larger screens, it will stretch until it reaches the maximum size.
The`minmax()`function takes two parameters,`min`and`max`, where:
- min is the minimum size of the track.
- max is the maximum size of the track.
Syntax:
`minmax(, );`
The`minmax()`function also accepts CSS Grid sizing units, keywords, length and percentage values.
Let’s look at an example using the`minmax()`function.
```
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, minmax(100px, max-content));
}
Code language: CSS (css)
```
In the code above, we use the`minmax()`function to set the minimum height of the two rows in our grid container to 100px and the maximum height to`max-content`, which ensures each row stretches and becomes as wide as possible to contain its contents if it gets taller than`100px`.
The result:
Two rows and three columns. The three columns have equidistant widths. The first row has 100px height, and the second has the height of a paragraph inside one of the cells.
A significant benefit of the`minmax()`function is that it reduces the need for media queries. Rather than relying mainly on media queries to control the size of grid tracks (columns and rows) across viewports, it lets you set up, to a degree, a responsive transition of values for a grid track.
### fit-content()
The`fit-content()`function operates similarly to the`minmax()`function. The difference is that with`fit-content()`, the minimum value is the size of the content within the grid item, and the maximum value would be the value we pass to it. This lets you clamp your content to the smallest value and scale it up to a certain value as needed.
When applied to a grid track, it sets the size of the grid track to its intrinsic minimum width, which is the size of the smallest piece of content or text in its grid items. The caveat is that the smallest piece of content or text size is not larger than the value specified in the function.
However, if the value of the intrinsic minimum width exceeds the value supplied to the function, the size of the grid track is set to the value passed to the`fit-content()`function, and the content of the grid items will begin to wrap.
For example:
```
.container {
display: grid;
grid-template-columns: fit-content(200px) fit-content(300px) fit-content(400px);
}
Code language: CSS (css)
```
The code above creates three columns with widths of 200px, 300px, and 400px, respectively, using the`fit-content()`function. This means that the size of each column will be equal to the size of the smallest piece of content or text in its grid items, but if that becomes greater than the value supplied to the`fit-content()`function, then the size of the columns will be set to the value passed to the`fit-content()`function.
The result:
A grid with three columns. The first and third columns are only as wide as a single character, since that’s what they contain. The middle column is 300px wide because there’s a paragraph in the middle of it.
## Expanding grid items across multiple grid lines
Remember, when talking about grid lines, the horizontal lines reside on either side of a row (known as row grid lines), and the vertical lines reside on either side of a column (known as column grid lines) within the grid container.
In the grid container, each grid line is given a number based on its position on the grid. The first grid line (row or column) is given the number 1, the second 2, and so on.
For example, the image below displays the number of grid lines present on a grid container with three columns and two rows, where the column lines are the numbers inside the orange circle from 1 – 4, while the row lines are the ones inside the blue circle from 1 – 3.
A grid system with the lines numbered as described previously
The browser uses these grid lines to control the layout and position of items within the grid. For instance, in the image above, the first column spans from column line 1 to column line 2, and the first grid item will be placed between those lines and span that wide. However, a handful of CSS Grid properties let us control the position of grid items along these grid lines and how wide they would span horizontally and vertically across them.
The properties you can use to control the position of grid items and how they span across these lines are:
- `grid-column-start`
- `grid-column-end`
- `grid-row-start`
- `grid-row-end`
Let’s go over each in detail.
### grid-column-start
The`grid-column-start`CSS property lets us specify the horizontal starting position of a grid item along the column grid lines within the grid container. This start position defines the start of the left edge of the grid item.
Using the grid layout below, let’s target the first grid item and set its horizontal starting position to column line 2.
A grid with two rows and three columns with each cell area numbered. The first row is “1, 2, 3,” and the second row is “4, 5, 6”
We can target the`div`using [CSS pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), or you can apply classes to the element and target it with that.
```
.container div:nth-of-type(1) {
grid-column-start: 2;
}Code language: CSS (css)
```
Doing this, the horizontal starting position of the selected grid item will be on the second vertical grid line (column line 2).
A grid with three rows and three columns, and six items. The first item in the grid starts on the second column, which shifts every numbered cell item to the right by 1, overflowing to the left.
From the image above, the first grid item now begins at column line 2, while the other grid items are pushed over, wrapping onto new rows or creating empty spaces on the grid.
### grid-column-end
Along with specifying the horizontal starting position of a grid item with`grid-column-start`, we can set where the grid item should end using the`grid-column-end`property.
For example:
```
.container div:nth-of-type(1) {
grid-column-start: 2;
grid-column-end: 4;
}Code language: CSS (css)
```
This makes the first grid item start on column line 2, span across two grid lines, and end on line 4. Using the`grid-column-start`and`grid-column-end`properties, we can effectively control the horizontal starting position of a grid item and how wide it spans across the grid.
The result:
A grid with three rows and three columns, and six items. The first item in the grid starts on the second column and spans into the third column, which shifts every numbered cell item to the right by 2, overflowing to the left.
### grid-row-start
The`grid-row-start`property lets us specify the vertical starting position of a grid item along the horizontal (row) grid lines within the grid container. This sets the line where the grid item begins.
For example:
```
.container div:nth-of-type(2) {
grid-row-start: 1;
}Code language: CSS (css)
```
In the code above, we set the vertical starting position of the second`div`element to row line 1 using the`grid-row-start`property.
The result:
A grid with three rows and three columns and six items. The order of the items is: “2, 1”, “3, 4, 5”, then “6” on each row, respectively.
### grid-row-end
The CSS`grid-row-end`property lets us specify the vertical ending position of a grid item along the horizontal (row) grid lines within the grid container.
For example:
```
.container div:nth-of-type(2) {
grid-row-start: 1;
grid-row-start: 4;
}Code language: CSS (css)
```
This makes the second grid item start on the first-row line and span down three grid lines, ending on line 4. Using the`grid-row-start`and`grid-row-end`properties, we can effectively control the vertical starting position of a grid item and its height down the grid.
The result:
A grid with three rows and columns. The first item starts on the second column and stretches to the third column on the first row. The second item starts on the first row and stretches to the third row on the first column. The last four items make up a two-by-two square in the bottom left corner.
## CSS Grid shorthands
Like most CSS properties, CSS Grid offers a handful of shorthand properties that provide a shorter and more forward way to set the values of multiple CSS Grid properties simultaneously. Using these shorthand properties, we can write more concise (and often, more readable) style sheets, saving time and energy.
Let’s take a look at these properties.
### Using a single CSS rule to set all gutters in a grid
In this guide, we have seen how we can add gutters (spacing) between columns and rows to space them apart using the`column-gap`and`row-gap`grid properties. Using a single property —`gap`, we can set the values for both the`column-gap`and`row-gap`properties.
The`gap`property is a shorthand for the row-gap and column-gap properties. It lets us add gutters (spacing) between columns and rows.
Syntax:
`gap: `
The gap property accepts two values where:
- ``is the first value passed to the gap property. It sets the value of the`row-gap`property.
- ``is the second value passed to the gap property and sets the value of the column-gap property. It is an optional value, and if omitted, it’s set to the same value as``.
For example:
```
.container {
display: grid;
gap: 20px;
}Code language: CSS (css)
```
This adds a space of`20px`between all columns and rows in a grid container and is the same as the code below.
```
.container {
display: grid;
column-row: 20px;
row-gap: 20px;
}
Code language: CSS (css)
```
### Combining horizontal and vertical alignments into single CSS rules
We talked about the six CSS Grid properties that let us control the alignment of grid items along the rows (incline axis) and columns (block axis) of a grid container. In this section, we’ll go over the shorthand properties that let us set the alignment of grid items much better.
#### place-items
`place-items`is a shorthand property that lets us set the values for the`align-items`and`justify-items`properties in a single declaration. It allows us to control the alignment of all grid items horizontally and vertically at once.
It accepts two values: the first value sets the value of the align-items property, and the second sets that of the justify-items property. If the second value is not specified, the first value will be assigned as the value of both properties.
For example:
```
.container {
display: grid;
place-items: center;
}
Code language: CSS (css)
```
This sets the value of both the`align-items`and`justify-items`properties to`center`, placing all grid items at the center of their grid areas.
#### place-content
`place-content`is a shorthand property that lets us set the values for the grid properties`align-content`and`justify-content`in a single declaration—enabling us to control the horizontal and vertical alignment of the entire grid within the grid container at once.
It accepts two values: the first value sets the value of the`align-content`property, and the second sets that of the`justify-content`property. If the second value is not specified, the first value will be assigned as the value of both properties.
For example:
```
.container {
display: grid;
place-content: center;
}
Code language: CSS (css)
```
This sets the value of both the`align-content`and`justify-content`properties to`center`, centering the entire grid within the grid container horizontally and vertically.
#### place-self
`place-items`is a shorthand property that lets us set the values for the`align-self`and`justify-self`properties in a single declaration. It enables you to control an individual grid item’s horizontal and vertical alignment within its grid area.
It accepts two values: the first value sets the value of the`align-self`property, and the second sets that of the`justify-self`property. If the second value is not specified, the first value will be assigned as the value of both properties.
For example:
```
.item {
place-self: end center;
}Code language: CSS (css)
```
In the code above, the value of the`align-self`property is set to ‘end,’ which pushes the grid item vertically down to the bottom of its grid cell. And the`justify-self`property is set to`center`, which places the grid item horizontally at the center of its cell.
The result:
The first grid item in the grid is aligned to the vertical end of the cell space and horizontally at the center, while all of the other items stretch to fill the cell area.
### Shortening the CSS for spanning grid items across columns and rows
Declaring the ‘grid-column-start,’ ‘grid-column-end,’ ‘grid-row-start,’ and ‘grid-row-end’ attributes anytime you want to span a grid item across some columns and rows can be somewhat redundant. Let’s look at some shorthand properties that can help us declare the CSS to span grid items more concisely.
#### grid-column
The grid-column is a shorthand property for the`grid-column-start`and`grid-column-end`properties. It lets us specify the horizontal starting position of a grid item along the column grid lines within the grid container and where the grid item should end.
Syntax:
`grid-column: column-start / column-end;`
The grid-column property accepts two grid line values separated by a slash (/) where:
- The first value,`column-start`, is the value of the`grid-column-start`property.
- The second value after the slash,`column-end`, is the value of the`grid-column-end`property.
- And the slash (/) serves as a demarcation between these two values as both can contain one or more whitespaces. As a result, passing the slash is required to eliminate errors and ambiguity. Also, as a best practice, adding some whitespace at both sides of the slash (/) is recommended to make our CSS more readable.
For example:
```
.gird-item {
grid-column: 1 / 4;
}Code language: CSS (css)
```
The code above tells the grid item to span horizontally from column line 1 to column line 4 in the grid.
#### grid-row
The`grid-row`property works just like the`grid-column`property. It is a shorthand property for the`grid-row-start`and`grid-row-end`properties. It lets us specify the vertical starting position of a grid item along the row grid lines in the grid container and where the grid item should end, spanning down the grid.
For example:
```
.gird-item {
grid-column: 2 / 5;
}Code language: CSS (css)
```
This causes the height of the grid item to span down from row line 2 to row line 5 in the grid.
### Bringing it all to a single property: grid
Lastly, we come to the last of the CSS Grid shorthand properties —`grid`.
The CSS property`grid`is a shorthand property that lets us set a value for each of the explicit grid container properties such as`grid-template-rows`,`grid-template-columns`, and`grid-template-areas`, and for each implicit grid container properties such as [`grid-auto-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows), [`grid-auto-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns), and [`grid-auto-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow), in a single declaration.
Syntax:
` | / [auto-flow && dense? ] ? | [auto-flow && dense? ] ? / `
You can read more about it [here](https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid).
## Try out CSS Grid yourself!
Creating the perfect layout for your website has never been easier. With CSS Grid, you can create complex layouts with as few lines of CSS, minimal development time, and less dependence on external libraries and frameworks.
You should now have a solid grasp of the CSS Grid layout, how it works, and how you can use it to lay out content on your websites. We’d love you to give it a try.
This article was written by [Victor](https://twitter.com/Victor_codejs). Victor is a front-end developer and technical writer interested in Jamstack. He has a knack for breaking down developer concepts into clear, understandable bits for others.
## Subscribe for more CoderPad insights
## Trending Articles
Previous slide Next slide [Development
## What is Prompt Engineering?
Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.
Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development
## A Guide To Using React’s useCallback() Hook
Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.
Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development
## MySQL vs. PostgreSQL: How Do They Compare?
A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.
Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development
## PostgreSQL LIKE Operator: A Detailed Guide
When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.
Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development
## How To Use DataProvider In TestNG With Examples
When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.
Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development
## How To Get Up And Running With Django Migrations: A Guide
Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.
Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development
## Writing A Parameterized Test In JUnit With Examples
A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.
Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development
## How To Use Assert In JUnit With Examples
The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.
Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development
## A Simple Guide To TypeORM: What It Is And How To Use It
Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.
Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development
## Using PreparedStatement in JDBC With Examples
In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.
Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development
## React vs React Native: The Differences Explained
React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.
Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development
## Logging in Django
The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.
Read the post](https://coderpad.io/blog/development/logging-in-django/)
## Hire with confidence.
See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.
[Request a demo](https://coderpad.io/sales/)