CODEWITHSUNDEEP
htmlcss
Yash Gulati
Yash Gulati

Reputation: 82

Issue with CSS Grid & Margin

When I add margin to my grid, due to width of the grid elements being 33.33% the sections stack vertically.

Also I don't want to use any framework (I'd like to do thisjust by using custom CSS).

Example Website

Upvotes: 1

Views: 24939

Answers (4)

user4759415
user4759415

Reputation:

If you have your three columns lets say like this

<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

As soon as you add margin or padding to them they will push the one furthest to the right down a line. Reason being is at 33.3% wide already there is no space to extend them any further because it then goes over 100%.

If you were to do this

<div class="col-md-3">
    <div class="inner" style="padding:10px;"></div>
</div>
<div class="col-md-3">
    <div class="inner" style="padding:10px;"></div>
</div> 
<div class="col-md-3">
    <div class="inner" style="padding:10px;"></div>
</div>

Then all the content in the .inner div would have the padding applied to it so that the content wouldn't appear to touch the contents in the next .col-md-3 beside it.

Here is a fiddle illustrating the point further https://jsfiddle.net/mak9te5c/

Upvotes: 1

justinw
justinw

Reputation: 3966

When you use margin with elements that have a % width, it adds whatever the margin value is, to the %.

For example if you have elements that are 33% wide and add 10px margin to those elements; your elements are 33% + 10px which makes them wider than 33%.

Use padding instead (and box-sizing: border-box

FIDDLE

Upvotes: 7

Mohammad Usman
Mohammad Usman

Reputation: 39322

You need one more wrap around your divs to make your own grids.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
body {
  font-family: Comic Sans MS;
}
.container {
  padding: 50px;
  overflow: hidden;
}
h1 {
  text-align: center;
  margin: 20px 0px 20px 0px;
}
section {
  float: left;
  padding: 0 20px;
}
.section-content {
  background-color: #808080;
  border: 2px solid black;
  overflow: hidden;
}
.section-content > h3 {
  float: right;
  padding: 5px 30px;
  clear: both;

}
.section-content > p {
  padding: 5px;
  float: left;
}

div>section:nth-child(1) h3{ background-color: #D59898; }
div>section:nth-child(2) h3{ background-color: #C14543; color: white; }
div>section:nth-child(3) h3{ background-color: #E5D198; }
@media(min-width: 992px){
  section{
    width: 33.33%;

  }
}
<h1>Our Menu</h1>
<div class="container">
  <section>
    <div class="section-content">
      <h3>Chicken</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad miluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  quis nostrud exer.
      </p>
    </div>
  </section>
  <section>
    <div class="section-content">
      <h3>Beef</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veit anim id est laborum.
      </p>
    </div>
  </section>
  <section>
    <div class="section-content">
      <h3>Sushi</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vo  quis nostrud exer quis nostrud exer.
      </p>
    </div>
  </section>
</div>

Upvotes: 1

Tezekiel
Tezekiel

Reputation: 153

As margin is added on top of element width your combined width of 3 elements is more than 100% that is why your element goes into next row. You can lower your element width so that is 100% added with margins. Or don't use margins.

Upvotes: 1

Related Questions