Sorry I was in location and just get back now...
In fact it all depnd about your way, and what you want to learn... @osgood_ propose a nice way to go too... just explore it...
now sticking to tthe previous approach, there are as many solutions for integrating a gap as there are developers on this thread... although sometimes, for this kind of need, grid is more direct and simple... in any case, here are a few ideas for aligning 4 elements in a row, or 2 or 1 alone, depending on the width of the available screen and also now integrating a gap
Approach 1: Flexbox with Margin
.flex-container {
display: flex;
flex-wrap: wrap;
margin: -5px; /* Negative margin to offset child margins */
}
.flex-container .box {
flex: 1 0 calc(25% - 10px); /* Basis of 25% minus margin */
margin: 5px; /* Margin for spacing */
}
Each box got, as you was exploring, a property flex: 1 0 calc(25% - 10px). So it means each box will take about 25% of the container width, minus 10 pixels for the margin (5 pixels on each side).
The negative margin on the container is helping to offset the margin applied to each box, so they stay aligned good without overflowing the container.
Then with media queries, when the screen width is less than 900 pixels, just adjusts to 50% for two boxes, and when it’s less than 600 pixels, apply 100% .
@media (max-width: 900px) {
.flex-container .box {
flex: 1 0 calc(50% - 10px); /* Basis of 50% for two items in a row */
}
}
@media (max-width: 600px) {
.flex-container .box {
flex: 1 0 100%; /* Basis of 100% for one item in a row */
}
}
Approach 2: CSS Grid
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four equal columns */
gap: 10px; /* Gap between items */
}
Use display: grid property for create a grid layout and apply a grid-template-columns: repeat(4, 1fr) to define four columns in the grid.
The 1fr unit means that each column will have each an equivalent width from the available space, so they will adapt when the screen size changes.
Then gap: 10px property define the gap between each items whatever their width is.
Now, when the width is below 900 pixels, switch the grid-template-colums to 2, and below 600 pixels to just 1.
@media (max-width: 900px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Two columns */
}
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr; /* One column */
}
}
Approach 3: Flexbox with Gap
.flex-gap-container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Gap for spacing */
}
.flex-gap-container .box {
flex: 1 0 calc(25% - 10px); /* Basis of 25% for four items in a row */
}
you can also use Flexbox again, but this time take advantage of the gap property to manage the space between the boxes.
gap: 10px , that will automatically creates a space of 10 pixels between the flex items
no need to play with margin anymore... but... while the gap property works well beside Flexbox in modern browsers, it’s not supported in all versions.
That should do the job for testing purpose https://demo.puce-et-media.com/UnderS/flexbox-2.html
1 Correct answer
14
Replies
AdChoices