Adjusting the margin in a flex grid using CSS

I am trying to create a grid layout using flex, where I want to have a 3x3 grid of blocks with a margin between each block.

However, when I add a margin, it changes the layout to 2x5 instead.

Can anyone provide guidance on how to achieve a 3x3 grid with a margin between each block?

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}

.block{
  width: 33%;
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}
<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

cssflexbox

Answer №1

To achieve your desired layout, utilize the flexbox property justify-content: space-between;. This will distribute the remaining space between elements.

In this case, adjusting the width to less than 33% creates extra space while applying justify-content: space-between; to the wrapper ensures proper spacing.

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block{
  width: 30%;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 15px;
}
<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer №2

Utilize the calc function to deduct the margin (10px = 5px on each side) and remember to set box-sizing: border-box for all your HTML elements to avoid including the border in your calculations.

* {
  box-sizing: border-box
}

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}

.block{
  width: calc(33.3333% - 10px);
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}
<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

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

Dynamic background color sliding sticky header

After countless hours of searching online, I couldn't find anything that matched exactly what I was looking for. I attempted to create it myself, but after two days of trying, I gave up due to various reasons. So now I'm reaching out to all of yo ...

javascriptjqueryhtmlcssjquery-effects

Internet Explorer displaying incorrect formatting for HTML CSS tables

Having an issue with table display on IE 9/10/11. Tested code on different browsers and platforms, everything looks good except when viewed on my HTTP server (lighttpd and python SimpleHTTPServer), the table is showing up incorrectly: var cell = $(&apos ...

javascripthtmlcssinternet-explorer

What is preventing me from being able to reposition certain tables on my site?

I have successfully implemented certain aspects of my responsive website, but I am encountering some difficulties in moving specific tables. I can adjust the table in various directions, except for moving it downwards. Even when adding the word !important ...

htmlcss

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with. My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either &a ...

javascriptjqueryhtmlcss

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The concept is to have users select options and then receive employment sector suggestions based on their selections. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

javascripthtmlcssforms

Issues with the disappearance of elements when using the Toggle() function

I've created a toggle feature for displaying a sub menu (.li-one) when clicking on the main menu (.ul-one). The issue arises when you click on another menu item, as the previous one does not disappear unless you click outside of the .main-nav div. Is ...

jqueryhtmlcsstoggle

What is the best way to place a list within a <div> element?

There is a <div> with an image in the background. I now want to include a list within that div, but I'm having trouble positioning it. Check out this image for reference In the image above, you can see the background and the list, but I'm ...

htmlcss

How come the dark grey in CSS appears to be lighter than the standard grey hue?

JSBIN DEMO Could this be a mistake or is it a bug? Shouldn't the dark gray shade be darker than the default grey one? HTML <div class="lightgrey">Light Grey</div> <div class="grey">Grey</div> <div class="darkgrey">Dar ...

csscolors

The Reason Behind Angular Error when Using CSS Custom Tags

I have the following SCSS code: main{ width: 100%; height: 840px; /*background: red;*/ margin: 10px auto; position: relative; padding: 5px 0; } section{ width: 98%; height: 600px; margin: auto; display: flex; ...

htmlcssangular

Tips for displaying two input decorations in Material UI beside one another within a text field

In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...

javascriptcssreactjsmaterial-ui

Designing CSS outlines to create shapes

I want to design a unique navigation for my website without using images, so I thought using shapes would be a cool idea. Specifically, I am trying to create a crescent moon shape with a border. My goal is to have a border around the red part of the cres ...

htmlcsscss-shapes

Having issues with Bootstrap 4 on mobile - site stretches too wide and causes side-scrolling. Is it a possible syntax error?

Currently, I am working on a website that utilizes multiple backgrounds layered on top of each other using Sass and Bootstrap. However, I am encountering a problem in the mobile view where users can scroll horizontally, which is not desired. Additionally, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using a function within a map in SCSS looping

Forgive me if this question sounds trivial, but I am curious if it is achievable to generate a series of functions using a loop within a map in SCSS. The code snippet below unfortunately does not yield the desired outcome, however, it illustrates what I a ...

csssass

In Firefox, the parent div's width is greater than the combined width of its children

In Firefox, I am encountering a peculiar problem. The issue arises when I have a div with a height defined in a fixed px value, and an img element nested within it. While this configuration works fine in Chrome, in Firefox, the parent div's width end ...

javascriptcssfirefox

What could be causing the varying thickness of the bottom borders in certain TDs/TRs in Firefox?

Do you notice that bottom borders in some <td> and <tr> elements are thicker in Firefox compared to Chrome and Opera? table.mytable td { border: 1px solid black; } <table class="mytable"> <!-- Table Code Snippet --> </table& ...

htmlcss

Enabling the autowidth label expands the width of the td element

I am facing an issue where a label inside a table td grows in only one line when its width is greater than the td width. This results in the td expanding and not showing all the text. I would like the label to break into a new line when its width exceeds ...

htmlcssstylesheet

Switch out mobile buttons with Bootstrap 3

I'm currently utilizing Bootstrap 3: <ul class="dropdown-menu btn-block"> <li><a href="#">Reason 1</a></li> <!-- for desktop --> <li><a href="#" class="visible-md visible-lg">Reason 2&l ...

cssmobiletwitter-bootstrap-3

Utilizing Flexbox to create a layout with a full-width block followed by two blocks containing images below

I am looking to achieve a design similar to this: https://i.sstatic.net/MxzIS.png The layout should remain consistent across mobile devices: featuring a 100% width block with 2 images and buttons below it. Images should span the full width of the bloc ...

htmlcssflexbox

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...

javascripthtmlcss

CSS Transition - Troubleshooting my malfunctioning code

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

csscss-transitions