How to Display Three Columns Per Row in CSS Flexbox? Last Updated : 29 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.ApproachCreate 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 Comment More infoAdvertise with us Next Article How to Set Three Columns in One Particular Row in CSS Grid? G ghuleyogesh Follow Improve Article Tags : HTML CSS-Questions 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 2 min read 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 2 min read 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 4 min read 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 4 min read 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 5 min read 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 3 min read Like