By the end of this guide, you’ll be equipped to start designing CSS grid layouts. You will also learn how to create these layouts visually — without touching a single line of code — using Webflow.
CSS grids are super handy. They help you create complex layouts with ease which is quite unlike HTML tables. And not just individual sections, but an entire site layout can be designed with just CSS grids.
Think of them as Excel sheets with rows and columns — you can merge rows, move cells around, add remove data, and do a lot more.
That’s fundamentally what CSS grids are. Let’s look at them in more detail.
Understanding CSS grid layouts
CSS grids are HTML layout systems. They work on the principles of a table — you arrange items in rows and columns.
Consider the image below to understand the structure of CSS grids:
You start with a grid container that holds your grid — all the rows and columns are stored within this container block
Then you have grid lines that visually divide your grid cells individually. You can choose to show or hide these lines depending on the layout you want to create
The elements you place in a grid are called grid items. These are direct descendants of your grid containers
Grid cells are the small squares that hold your grid items
Elements can be stacked on top of each other using the z-index property
And finally, grid track is the space between two adjacent cells
Unlike tables, CSS grids help you create complex layouts without the need for extra HTML elements or weird CSS tricks. You can merge-unmerge data and even nest grids within grid cells with simple structured CSS.
Let’s look at a simple HTML grid layout:
<!-- index.html -->
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #c0c0c0;
padding: 20px;
text-align: center;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="grid-item">Hello,</div>
<div class="grid-item">World!</div>
</div>
Save the above code as index.html. Double-click to run the file and you should see the following output.
We’ll look at the details in the next section. For now, get acquainted with the CSS and HTML structure.
How to create a table with the CSS grid?
We’ll work with the CSS grid to create a table with 5 rows and 2 columns containing a list of student names along with their age.
Remember, everything in a grid is made of divs. Let’s start by creating the base HTML structure and saving it as index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="title">Student Name</div>
<div class="title">Age</div>
<div class="name">John Doe</div>
<div class="age">20</div>
<div class="name">Jane Smith</div>
<div class="age">22</div>
<div class="name">Emma Brown</div>
<div class="age">21</div>
<div class="name">Michael Johnson</div>
<div class="age">23</div>
<div class="name">Emily Davis</div>
<div class="age">20</div>
</div>
</body>
</html>
We started with a main div block with the class container. This will house all the rows and columns within it.
We also created two div blocks for our header columns. The class for this is title.
After this, we add our rows as individual div blocks with the classes name and age.
We’ll now add the CSS grid property to it and some styling to make it look pretty. Save this file as style.css
.container {
display: grid;
grid-template-columns: auto auto;
gap: 17px;
padding: 20px;
background-color: #cfcfcf;
}
.title {
background-color: #c0c0c0;
padding: 20px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.name, .age {
background-color: #c0c0c0;
padding: 20px;
text-align: center;
font-size: 20px;
}
We begin with styling the grid container or the .container class.
display: grid; — The .container class contains all the div elements. We’ll add the grid styling to this class. Adding display: grid tells the browser to render the elements as a grid
*grid-template-columns: auto auto; *— This property is used to define the number of columns and their width. Using auto and auto here will allow the browser to flexibly adjust the grid to fit the content
gap: 17px; — This property is used to set the grid track or the space between the grid cells
** padding: 20px;** — Here, the padding adds a little space around the entire grid so when its placed on a web page, the grid doesn’t stick too close to other elements.
background-color — This sets the background color of the complete grid to #cfcfcf. It’s a good idea to set a visible background color while you’re creating the grid. It will help you see exactly how big or small the grid is and how you need to adjust it.
*Then we’ll style individual cells
*
For the title, name, and age classes, we add a background-color, font-size, padding, and text-align properties. You can customize these as you prefer.
Apart from these, we also added a font-weight: bold property to the title.
Let’s see how this renders.
This is quite plain and looks really boring. And yet, it took a lot of time to create and test things out.
What if there was an easy way?
How to create a CSS grid table using Webflow?
Webflow makes designing fully custom, high-performance layouts as easy as dragging-and-dropping elements.
And it’s no different when creating a CSS grid table. Let’s use the same Student name and age data to create a CSS grid table in Webflow.
Creating the grid
Login to your Webflow account and open the designer
Click the Plus sign on the top left of your screen to see all elements. Scroll to the bottom for the grid layout.
Drag and position the grid layout element on your page
It will create 2 rows and 2 columns by default. This is our container element
- The width of columns is set to 1 FR which are flexible units. Meaning, if you have two columns, each will occupy one fraction. In the case of this example, 1/2 . So your columns will automatically be of equal width at 50% each. The height of rows is set to auto and will increase based on the content.
Adding items to the grid
- To start adding items, we need to create an area. Think of grid areas as names for the cells. If you want to place one item in the first cell, and another item in the 4th cell, you can set it to show in Area 1 and Area 4 (or whatever name you provide)
Once you’ve added the grid areas, you’re pretty much set.
Now, we need to add more rows to the grid. Click on the Edit Grid button from the right panel or by hovering on your grid. Then, click the plus sign under your final row to add new rows.
After you are satisfied with the number of rows, start by dragging and dropping text elements from the Add elements menu on your top left.
Then, add the data to each grid.
Styling the CSS grid table
Right now, there is no styling to our grid. Let’s add some.
- Hover over your grid and click on Container
- Then in the right pane, you can begin customizing and adding styling to the entire container. We’ll begin by adding 20px padding to all the sides.
- Next, scroll further on the right panel settings to find the background color option.
- If you wish to adjust the gap, hover over your grid and click when you can see the grid name displayed. In the right panel, click Edit grid and you can adjust the grid-gap on the top right.
- You can also center align the text here. Play around with the styling for the perfect CSS grid table.
Your CSS grid table just needs some human touch for styling! Play around with the styling and the vast array of grid customization settings available on Webflow to create the perfect table for your needs. Also, the grid is responsive by default and you can choose to customize how it behaves on different screens too.
Top comments (0)