PUBLISHED ON: AUGUST 25, 2021
How to create a mixed column layout grid with CSS?
A webpage is a combination of elements like text, images, tables, buttons, forms, links, etc. Elements in the webpage should be arranged in such an order that users can easily extract the information in it.
The layout makes it easy to add elements to the webpage. The layout should be designed so that it perfectly fits all types of viewports.
In this tutorial, we will be learning to create a mixed column layout with CSS
Creating a mixed column layout grid
Take a <div> element and wrap the column inside it and add display:flex property to the <div> container so that the container act as flex.
Now add the flex with a percentage value to align a particular number of columns within each row. For example, set flex: 30% to align three-column per row. Use @media rule to add a responsive layout.
Example: Creating a mixed column layout grid with CSS
In this example, we have created a mixed-column layout grid where there are three columns for the larger viewport.
For a viewport smaller than 800px there are two columns and for a viewport smaller than 500px there is only one column per row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.column {
flex: 30%;
height: 200px;
padding: 10px;
margin: 5px;
background-color: #cccccc;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 800px) {
.column {
flex: 40%;
max-width: 40%;
}
}
@media screen and (max-width: 500px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<h2> Mixed column 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 example.
For larger viewport
For small viewport
Example: Creating a mixed column layout grid with CSS
In this example, we have created a responsive column layout with the width property. Added different width percentages for the same layout in the different viewport.
Conclusion
In this tutorial. we have created a mixed column layout grid for the webpage. We can create a responsive column using CSS flex or just adjusting width with the media rules.
