How to create a 2-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. In this tutorial, we will be creating a 2-column layout grid in CSS.
Using CSS flexbox
We can create a 2-column layout grid using CSS flexbox. Add the display: flex property to the container class. Use flex property to the column.
Example: Create a 2-column layout grid with CSS
Here is an example to create a 2-column layout using flexbox properties. Both the column has equal width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 16px;
height: 250px;
}
</style>
</head>
<body>
<h2>Creating two column layout </h2>
<div class="row">
<div class="column" style="background: #CCCCCC;">
<h2> column 1 </h2>
<p> some contents in column 1</p>
</div>
<div class="column" style="background: #d3d3d3;">
<h2>column 2</h2>
<p> Some contents in column 2 </p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Using CSS grid property
The grid property is used to layout major page areas. We can create a grid of fixed track sizes by creating a grid container using display:grid and add two columns using grid-template-columns.
Example: Add two columns layout using CSS grid
Here is the example where we have created a two-column layout using grid property.
Conclusion
In this tutorial, we have learned to create two columns grid layout using CSS properties. It can be created using flexbox properties or grid properties. Grid properties can also be combined with flexbox to create a complex layout.
