How to Create a 3-Column Layout Grid with CSS?
Last Updated :
06 Aug, 2024
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 a 3-column design that adjusts to various screen sizes.
These are the following approaches:
Using Grid layout
In this approach, we are using CSS Grid to create a 3-column layout by defining a grid with three equal-width columns in the .container class. The body is centered horizontally and vertically aligned using text-align: center and justify-content: center. Each .item is styled with flexbox to make sure its content is centered both horizontally and vertically.
Example: The below example performs a Basic 3-column Layout in a grid with CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>3- column layout</title>
<style>
body {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
font-family: Arial, sans-serif;
justify-content: center;
text-align: center;
}
h1 {
color: green;
grid-column: span 3;
}
h2 {
color: black;
grid-column: span 3;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.item {
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Basic 3-Column Layout</h2>
<div class="container">
<div class="item">
<h3>Languages</h3>
<p>Python, JavaScript, Java, C++</p>
</div>
<div class="item">
<h3>Courses</h3>
<p>Data Structures, Algorithms,
Web Development</p>
</div>
<div class="item">
<h3>Articles</h3>
<p>Introduction to Algorithms,
Web Development Basics</p>
</div>
</div>
</body>
</html>
Output:
OutputIn this approach, we are using CSS Grid to create a responsive 3-column layout, which adjusts to 2 columns on tablets and 1 column on mobile devices. Media queries make sure the grid adapts to different screen sizes, improving usability across various devices. The .item elements are styled for a consistent look, with responsive adjustments applied to the grid template columns.
Example: The below example performs Responsive 3-Column Layout.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>3-column Layout</title>
<style>
body {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 20px;
font-family: 'Segoe UI',
Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
color: green;
text-align: center;
}
h3 {
margin-top: 20px;
font-size: 1.2em;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.item {
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #e0f7fa;
text-align: center;
}
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="container">
<div class="item">
<h3>Languages</h3>
<p>Python, JavaScript, Java, C++</p>
</div>
<div class="item">
<h3>Courses</h3>
<p>Data Structures, Algorithms, Web Development</p>
</div>
<div class="item">
<h3>Articles</h3>
<p>Introduction to Algorithms, Web Development Basics</p>
</div>
</div>
</body>
</html>
Output:
Output
Similar Reads
How to Create a 4-Column Layout Grid with CSS? 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 c
3 min read
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 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