How to Create a 4-Column Layout Grid with CSS?
Last Updated :
08 Aug, 2024
We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a common design structure used in web pages to neatly organize content. By dividing our content into four equal or custom-sized columns, we can create a clean and balanced look. This layout is perfect for showcasing multiple items side by side, such as product listings, image galleries, or article previews.
Below are different approaches to creating a 4-column Layout Grid:
Using CSS Grid
CSS Grid is a powerful layout system that allows you to create complex grid-based layouts. It is the most modern and flexible way to create a 4-column grid layout.
Syntax:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}Example: In this example, grid-template-columns: repeat(4, 1fr); creates a grid with four equal columns. The 1fr unit means "one fraction" of the available space, so each column will take up an equal amount of the container's width.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>4-Column Layout with CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Column 1</div>
<div class="grid-item">Column 2</div>
<div class="grid-item">Column 3</div>
<div class="grid-item">Column 4</div>
</div>
</body>
</html>
Output:
Using CSS GridUsing CSS Flexbox
Flexbox is another layout system that can create a 4-column layout, but it's more suited to single rows or columns rather than grids. However, it can still be used effectively for this purpose.
Syntax:
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 22%;
background-color: #ccc;
padding: 20px;
text-align: center;
}Example: In this example, each flex item is given flex: 1 1 22%;, which means each column will take up 22% of the container's width, leaving some space for gaps between the columns.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>4-Column Layout with Flexbox</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 22%;
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Column 1</div>
<div class="flex-item">Column 2</div>
<div class="flex-item">Column 3</div>
<div class="flex-item">Column 4</div>
</div>
</body>
</html>
Output:
Using CSS FlexboxUsing Float and Width
Before CSS Grid and Flexbox, the float property was commonly used to create multi-column layouts. Though less flexible and more outdated, it's still useful to know.
Syntax:
.float-container {
overflow: hidden;
}
.float-item {
float: left;
width: 24%;
margin-right: 1%;
background-color: #ccc;
padding: 20px;
text-align: center;
}
.float-item:last-child {
margin-right: 0;
}Example: In this example, each column is floated to the left with a width of 24% and a margin to create space between the columns. The last column has no right margin to avoid extra spacing.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>4-Column Layout with Floats</title>
<style>
.float-container {
overflow: hidden;
}
.float-item {
float: left;
width: 24%;
margin-right: 1%;
background-color: #ccc;
padding: 20px;
text-align: center;
}
.float-item:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="float-container">
<div class="float-item">Column 1</div>
<div class="float-item">Column 2</div>
<div class="float-item">Column 3</div>
<div class="float-item">Column 4</div>
</div>
</body>
</html>
Output:
Using Float and WidthConclusion
It is easy to create a 4-column layout grid in CSS if we use the correct approach. CSS Grid offers the most flexibility and ease of use for creating grid layouts, but Flexbox, and Float also provide viable solutions depending on our needs.
Similar Reads
How to Create a 2-Column Layout Grid with CSS? Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or
4 min read
How to Create a 3-Column Layout Grid with CSS? Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as
3 min read
How to Create a Four-Column Layout with Bootstrap ? In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the ap
2 min read
How to create a Trello Layout with CSS Grid and Flexbox ? Trello layout is used to organize or manage information in stages. It can be created using CSS Grid and Flexbox. Let's create the layout as shown in the below image. In the image, Trello Layout consists of Trello List which holds the items or information in it. Layout Structure: Trello layout Exampl
2 min read
How to Create a Responsive CSS Grid Layout ? Here are different ways to create a responsive grid layout with CSS.1. Using auto-fill PropertyThis method can be used CSS Grid for a responsive layout. The grid-template-columns property adjusts columns based on space, keeping a minimum width of 200 pixels. Gaps between items are set with grid-gap.
3 min read
How to Create Dynamic Grid Layout using CSS? A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and s
3 min read
How to create single column grid ? In this article, we will learn how to create a single-column grid. We will be discussing two approaches to the task. Approach 1: Using the jQuery Mobile Grid: jQuery Mobile is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Th
2 min read
How to Create a Masonry grid with flexbox in CSS? Masonry Grid in CSS is a layout technique that arranges items in a way that resembles a masonry wall, where items of varying heights are placed in columns, filling in gaps and creating a staggered appearance. This can be done using Flexbox by allowing items to wrap and adjusting their heights to cre
3 min read
How to Create Columns with the Same Height in Tailwind CSS ? Creating columns of equal height is a common design requirement in web development. This need arises in scenarios like displaying a grid of cards or a list of items where each column should have the same height regardless of its content. Tailwind CSS, a utility-first CSS framework, provides several
2 min read
How to Create a Basic Two-Column Layout using Bootstrap 5 ? To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the lay
3 min read