How to Disable Text Selection in HTML with CSS?

How to Display Three Columns Per Row in CSS Flexbox?

Last Updated : 29 Jul, 2024

CSS Flexbox is a one-dimensional layout model that allows items within a container to be arranged in rows or columns with dynamic sizing and alignment. It simplifies the process of creating complex layouts and responsive designs. In this article we will explore approach to arrange columns in a container so that there are three columns per row.

Approach

Create a parent <div> that will act as the flex container.
Place individual <div> elements inside the container, each representing a column.
Set display: flex it will turns the container into a flex container and use flex-wrap: wrap to allow items to wrap to new lines when necessary.
Use flex properties flex: 1 1 calc(33.333% - 10px) this ensures each item takes up approximately one-third of the container's width, considering the gap.
Add some other stylings as needed.

Example: In this example we are using CSS Flexbox layout to display the three columns per row.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Three Columns Layout</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <h1>Three Columns Layout</h1>
    <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 class="flex-item">Column 5</div>
        <div class="flex-item">Column 6</div>
    </div>
</body>

</html>

CSS

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.flex-item {
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

Output:

Output

How to Disable Text Selection in HTML with CSS?

G

ghuleyogesh

Improve

Article Tags :

Similar Reads

How to Disable Equal Width Columns in CSS Flexbox?

With CSS Flexbox, developers can easily create complex and responsive layouts due to its powerful layout module. Its capacity to create equal-height columns inside flex containers is one of its features. There are situations, though, in which you might want to turn this behavior off and allow the he

How to Remove Display Flex in CSS?

We use "display flex" property in our CSS code to create a flexible layout. To remove display flex in CSS, We can simply set the display property of the particular element to another value like we can set "flex" to "block" or "inline-block" for our needs. These are the following approaches to remove

How to Set a Fixed Width Column with CSS Flexbox ?

When working with CSS flexbox, setting a fixed width for a column can be achieved by using various approaches to override the default behavior of flex items, which typically grow and shrink to fill available space. Table of Content Using the flex propertyUsing the min-width and max-width propertiesC

How to Set Three Columns in One Particular Row in CSS Grid?

Setting up a grid layout with specific columns in CSS can sometimes be a bit challenging, especially if we are new to CSS Grid. It is a powerful tool that helps us to create complex easily. In this article, we are going to learn about different approaches to setting three columns in one particular r

How to display a list in n columns format ?

We can display a list in n columns format in two ways: Using Float in list Using column-count in list Using float in list: By using float, we can make list to float left, i.e. the next item which follows it will be displayed into left. So, here we set the size of ol as 30em and size of one list item

What is Display Flex in CSS?

In CSS, display: flex; is a value of the display property that enables the flexible layout model for arranging the elements in a container. When you can apply the display: flex; to the container element, it can become the flex container and its direct children become the flex items. This layout mode

How to Add Rows & Columns on hover in CSS ?

Adding rows and columns on hover in CSS allows you to dynamically expand a grid layout when a user hovers over it. This can be visually appealing and useful for displaying additional information or options. We can use the below approaches to Add Rows and Columns on hover in CSS: Table of Content Usi

How to Get a Table Like Row/Column Alignment in a Flexbox ?

Getting a table-like row/column alignment in Flexbox refers to structuring content similarly to traditional tables, but with more flexibility. Flexbox allows items to align in rows and columns dynamically, offering responsive control over spacing, alignment, and positioning, ideal for modern layouts

How to Display Three Bootstrap Cards in a Column ?

In Bootstrap, aligning the three cards in a column is important to create a vertical layout for displaying content on smaller screen devices or to make the web page responsive and compatible for all devices. Use the below approaches to display three Bootstrap cards in a column: Table of Content Usin

Explain the concept of the CSS Flexbox

The CSS Flexbox (Flexible Box) model is a layout mechanism that provides a straightforward and efficient way to design complex, responsive, and dynamic web layouts. Introduced to address challenges posed by traditional layout models, Flexbox simplifies the alignment and distribution of space among i