Creating a gallery row that wraps onto a new line using flex properties

I've been attempting to create a gallery-like layout using flexbox, where the divs are displayed in rows of three columns each. However, I'm facing an issue where all the divs align in one row without dropping to the next line when there are more than three.

Below is my HTML code:

<div class="container">

<div class="inner">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi 
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, 
doloribus vel fuga?
  </p>
</div>
<div class="inner">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi 
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, 
doloribus vel fuga?
  </p>
</div>
<div class="inner">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi 
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, 
doloribus vel fuga?
  </p>
</div>
<div class="inner">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi 
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat, 
doloribus vel fuga?
  </p>
</div>

</div>

And here is my CSS code:

.container{
   display:flex;
   justify-content:space-evenly;
   align-items:center;
}

.inner{
  width:30%;
  background:#efefef;
  margin-left:1.662%;
  margin-right:1.662%;
}
htmlcssflexbox

Answer №1

To achieve the desired layout, make sure to include the flex-wrap property in your flex container definition.

.container{
   display:flex;
   justify-content:space-evenly;
   align-items:center;
   flex-wrap: wrap;
}

With each box occupying 30% of the space, the fourth box will automatically move to the next line when necessary.

Check out this example for reference: https://jsfiddle.net/pqec64x0/6/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The column headers in the Kendo grid fail to resize proportionally

The column headers in the Kendo grid do not scale correctly when the browser has a large or small resolution. This issue can be easily reproduced by zooming in or out on the browser. Refer to the image below for an example. Is this a known bug, and are th ...

csskendo-uitelerikkendo-grid

How to Customize PHP Date Format in Joomla 3

Hello, I am looking for guidance on how to customize the Date Format in Joomla 3 within mod_articles_category/default.php. The current code snippet looks like this: <?php echo $item->displayDate; ?> When rendered, it appears as a single line: ...

phpcssdatejoomlajoomla3.0

How can I reverse text from right to left using a for loop?

Here is my current setup: This is my CSS: .p1 { direction:rtl; text-align:right; float:right; } This is how it looks on the screen: <div class="p1"> @{ for (int i = 0; i < 5; i++) { ...

htmlasp.netcssasp.net-mvc-4

Error Message: "Oops! It looks like you are trying to access a property or method

I am in the process of developing a static website that includes tabs (a reactive property), each containing multiple cards (also a reactive property) with images and text. Recently, I encountered the following warning: [Vue warn]: Property or method &qu ...

javascripthtmlvue.jsvuejs2

loading embedded content on an asp.net webpage

I am working on an asp.net page that inherits from a master page where I load JavaScripts. My goal is to insert an iframe within the page that will direct to an HTML file (containing the link to JavaScript). Will my JavaScript codes function properly in ...

c#javascriptasp.nethtmliframe

Problem with overflowing in Bootstrap modal

Within my Bootstrap modal, there is a button that triggers the display of a dropdown menu right under it. This dropdown contains an unordered list with anchor links. The issue arises when the height of the modal's container isn't set high enough ...

javascripthtmlcss

Are there any open source libraries in jQuery or HTML that can be used for creating av

I have been searching extensively for an open source avatar library that can perform basic functions like choosing gender, eyes, and clothing. It was surprising to me that I couldn't find any open source framework for avatars on the web, especially c ...

jqueryhtmlavatar

Installing Angular Flex has been challenging for me

Encountering an error while running npm install @angular/flex-layout. Does anyone know what this means? I tried using --force, and the installation completed successfully. However, upon starting up the project, it seems to be broken. gonzalo@gonzalo-Inspir ...

angularnpmflexbox

By default, the first table row is displayed when using table grouping in AngularJS

I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...

htmlcssangularjs

Is there a way to create a table that has varying columns for each row?

I am currently working with bootstrap4 and I am trying to create a table that has 3 columns in the first row and 4 columns in the following two rows. I want it to look like this: https://i.sstatic.net/nuI55.png Here is my existing table: <link href ...

htmlcssbootstrap-4html-table

Detecting collisions between images that have been rotated using CSS animations

My project involves using CSS animations and jQuery to create a simulation of cars moving at a crossroads from a top-down perspective for a driving license quiz. Users must select the order in which the cars will cross by clicking on them. Sample Image: ...

javascriptjquerycsscollisiondetection

Having trouble getting my CSS gradient animation to work

I'm experimenting with creating a dynamic CSS gradient background effect. I'm using a tool to generate the CSS for the gradient, which can be found at this page: Here is the CSS code snippet: body { background: linear-gradient(270deg, #18f0b8, ...

htmlcssgradient

Validation in Bootstrap form does not appear when browser saved data is utilized

When data is saved in the browser, the bootstrap validation (green tick) does not display, but it works perfectly when the data is entered manually. <!doctype html> <html lang="en"> <head> <!-- Required meta tags and Bootst ...

javascripthtmlcssbootstrap-4

"Upon running the JS Form Validation, it yields an empty outcome

Currently, I am immersing myself in the lessons provided by CodeAcademy and have embarked on the task of crafting a basic HTML form that will validate input fields using JS. This marks the inception of a personal project dedicated to overhauling my brother ...

javascripthtmlforms

The dimensions of the background for a span element

I have a span element with a background-color applied to it. Is there a way to adjust the size of this specific background? I attempted using background-size: auto 2px;, but it did not produce the desired effect. I am looking to make the background color ...

css

Styling a span within a row in Bootstrap to automatically indent using CSS

I have integrated Bootstrap into my project and I am utilizing its grid system. I start by creating a row, then adding a span inside the row which functions as a column (col-12). The text inside this span is underlined, with <br> elements used to se ...

csstwitter-bootstrapbootstrap-4

Struggling with CSS Styling - Unable to align text in the middle of a table

.transfers table{ width: 650px; margin: 450px auto; border-collapse: collapse; } .transfers tr{ border-bottom: 1px solid #cbcbcb; } .transfers th{ font-family: "Montserrat", sans-serif; } .transfers th, td{ border: none; height: 30px; pa ...

htmlcss

Click on an element with specific criteria that is located within various parent and child elements using Selenium

In my Python Selenium script, I am attempting to click on an element <a class="clean" href="url"> under the condition that specific elements have certain values. These elements are <div data-passendheid="Correct"> ...

pythonhtmlseleniumxpath

How to Develop Screen-Reader-Friendly Ordered Lists using HTML5 and CSS?

Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately. I have created a jsfiddle demo showcasing referencing an ordered list ...

csshtmlaccessibilitysection508wcag2.0

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

htmlcssgoogle-chromecontenteditable