How to create a 3-column layout grid with CSS?
The layout is very important while designing a website. CSS grid layout is used to add columns and rows to the webpage. We can add any number of columns or rows to the webpage. Lets us see how we can create a 3-column layout with CSS.
Using CSS flexbox
We can create a 3-column layout grid using CSS flexbox. Add the display: flex property to the container class. Set the flex percentage value to each column. Here for three-layer, we can set flex: 33.33%. In addition, use other CSS properties to customize the column.
Example: Create a 3-column layout grid with CSS
Here is a program to create a 3-column layout using flexbox properties. Both the column has equal width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.column {
flex: 33.33%;
height: 200px;
padding: 10px;
margin: 5px;
background-color: #cccccc;
text-align: center;
}
.container {
display: flex;
}
</style>
</head>
<body>
<h2> 3-column grid layout</h2>
<div class="container">
<div class="column">
<h2> First column </h2>
<p> This is first column of our grid system</p>
</div>
<div class="column">
<h2> second column </h2>
<p> This is second column of our grid system</p>
</div>
<div class="column">
<h2> Third column </h2>
<p> This is third column of our grid system</p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above code.
Using CSS grid property
The grid property is used to layout major page areas or small user interfaces. We can create a grid of fixed track sizes. We can create columns by creating a grid container using display: grid. To add three columns use grid-template-columns. Specify the width of each column separated by white space. So we can add variable-width layout using grid property.
Conclusion
In this tutorial, we have learned to create three columns grid layout using CSS properties. It can be created using flexbox properties or grid properties. Grid properties can be used to create variable-width columns.
