CSS grid is overflowing

Question

I am trying to create a CSS grid. This is my HTML code:

<div  id="updates" class ="wrapper">
    <div id="content">
        <section id="services" class="last clear">
          <ul>
            <li>
              <article class="clear">
                <figure><img src="images/demo/180x150.gif" alt="">
                  <figcaption>
                    <h2>Indonectetus facilis leo nibh</h2>
                    <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                    <footer class="more"><a href="#">Read More &raquo;</a></footer>
                  </figcaption>
                </figure>
              </article>
            </li>

          </ul>
        </section>
      </div>
   
    
    <div id="content">
        <section id="services" class="last clear">
            <ul>
            <li>
                <article class="clear">
                <figure><img src="images/demo/180x150.gif" alt="">
                    <figcaption>
                    <h2>Indonectetus facilis leo nibh</h2>
                    <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                    <footer class="more"><a href="#">Read More &raquo;</a></footer>
                    </figcaption>
                </figure>
                </article>
        </li>

        </ul>
    </section>
</div>
    

My CSS file looks like this:

.wrapper{
    height: 90vh;
    margin: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr ; */
    /* margin-top: 5%; */
    /* margin-left: 15%; */

}

.wrapper > div {
    padding:1em;
}

.updates, .updates a{color:#C0BAB6; background-color:#333333;}

#header, #updates, #footer{display:block; width:600px; margin:0 auto;}
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#afaeae; background-color:#232323;}

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:16px; font-weight:bold; font-style:normal; line-height:normal; text-transform:uppercase;}


.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}


img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}
#updates #content #services{}
#updates #content #services ul{margin:0; padding:0; list-style:none;}
#updates #content #services ul li{display:block; width:100%; margin-bottom:30px;}
#updates #content #services ul li.last{ margin-bottom:0;}
#updates #content #services ul li article{}
#container #content #services ul li article figure{}
#updates #content #services ul li article figure img{float:left; width:180px; height:150px; margin:0; padding:4px; 
    border:1px solid #666666;}
#updates #content .more{
    text-align:right;

}   

This grid should be side by side. I did look at Firefox developer tab and it was saying overflow at updates id

I don't seem to understand why the the entire id=content is centered? Which is likely to cause the the overflow. I don't see any left-margin or padding which is causing the content to centered.

It looks like this right now

I used this:

  .wrapper > div {
        padding:1em;
    }

Do I need to target a specific class content for it to work? Because it seems like grid on all div.

Answer 1

Your outermost element has both a class of wrapper and an id of updates. And then you’re applying multiple style rules either from the class or the id, and these are interfering with each other.

Your first style rule sets up your grid:

.wrapper {
  display: grid;
}

But then your fourth style rule tells it to be a block instead of a grid:

#header, #updates, #footer {
  display: block;
}

I suggest you need to split your fourth style rule into two rules as follows:

#header, #footer {
  display: block;
}
#header, #updates, #footer {
  width: 600px;
  margin: 0 auto;
}

Here is a snippet to demonstrate:

.wrapper{
    height: 90vh;
    margin: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: 1fr 1fr ; */
    /* margin-top: 5%; */
    /* margin-left: 15%; */

}

.wrapper > div {
    padding:1em;
}

.updates, .updates a {color:#C0BAB6; background-color:#333333;}

#header, #footer {display:block;}
#header, #updates, #footer{ width:600px; margin:0 auto;}
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#afaeae; background-color:#232323;}

address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:16px; font-weight:bold; font-style:normal; line-height:normal; text-transform:uppercase;}


.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}


img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}
#updates #content #services{}
#updates #content #services ul{margin:0; padding:0; list-style:none;}
#updates #content #services ul li{display:block; width:100%; margin-bottom:30px;}
#updates #content #services ul li.last{ margin-bottom:0;}
#updates #content #services ul li article{}
#container #content #services ul li article figure{}
#updates #content #services ul li article figure img{float:left; width:180px; height:150px; margin:0; padding:4px; 
    border:1px solid #666666;}
#updates #content .more{
    text-align:right;

}

<div  id="updates" class ="wrapper">
    <div id="content">
        <section id="services" class="last clear">
          <ul>
            <li>
              <article class="clear">
                <figure><img src="https://i.guim.co.uk/img/media/88f6b98714035656cb18fb282507b60e82edb0d7/0_54_2560_1536/master/2560.jpg?width=465&quality=45&auto=format&fit=max&dpr=2&s=40d77868a83c41b1b8f969b6d83bc911" alt="">
                  <figcaption>
                    <h2>Indonectetus facilis leo nibh</h2>
                    <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                    <footer class="more"><a href="#">Read More &raquo;</a></footer>
                  </figcaption>
                </figure>
              </article>
            </li>

          </ul>
        </section>
      </div>
   
    
    <div id="content">
        <section id="services" class="last clear">
            <ul>
            <li>
                <article class="clear">
                <figure><img src="https://i.guim.co.uk/img/media/88f6b98714035656cb18fb282507b60e82edb0d7/0_54_2560_1536/master/2560.jpg?width=465&quality=45&auto=format&fit=max&dpr=2&s=40d77868a83c41b1b8f969b6d83bc911" alt="">
                    <figcaption>
                    <h2>Indonectetus facilis leo nibh</h2>
                    <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                    <footer class="more"><a href="#">Read More &raquo;</a></footer>
                    </figcaption>
                </figure>
                </article>
        </li>

        </ul>
    </section>
</div>

Answer 2

Your .wrapper class is overriding by #updates, because id has higher priority than class.

#header,
/* #updates, */ /* remove this ID */
#footer {
  display: block;
  width: 600px;
  margin: 0 auto;
}

1) If you don't care about how many columns you need

.wrapper {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* changed */
}

2) If you need only 3 columns

.wrapper {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(360px, 1fr)); /* changed */
  grid-auto-rows: auto; /* new line */
}
/* added breakpoint */
@media screen and (max-width: 1200px) {
  .wrapper {
    grid-template-columns: minmax(360px, 1fr);
  }
}

.wrapper {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  /* grid-template-rows: 1fr 1fr ; */
  /* margin-top: 5%; */
  /* margin-left: 15%; */
}

.wrapper>div {
  padding: 1em;
}

.updates,
.updates a {
  color: #c0bab6;
  background-color: #333333;
}

#header,
/* #updates, */
#footer {
  display: block;
  width: 600px;
  margin: 0 auto;
}

body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #afaeae;
  background-color: #232323;
}

address,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}

.clear:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}

.clear {
  display: block;
  clear: both;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
  vertical-align: middle;
}

.imgholder,
.imgl,
.imgr {
  padding: 4px;
  border: 1px solid #d6d6d6;
  text-align: center;
}

.imgl {
  float: left;
  margin: 0 15px 15px 0;
  clear: left;
}

.imgr {
  float: right;
  margin: 0 0 15px 15px;
  clear: right;
}

#updates #content #services {}

#updates #content #services ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#updates #content #services ul li {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

#updates #content #services ul li.last {
  margin-bottom: 0;
}

#updates #content #services ul li article {}

#container #content #services ul li article figure {}

#updates #content #services ul li article figure img {
  float: left;
  width: 180px;
  height: 150px;
  margin: 0;
  padding: 4px;
  border: 1px solid #666666;
}

#updates #content .more {
  text-align: right;
}

<div id="updates" class="wrapper">
  <div id="content">
    <section id="services" class="last clear">
      <ul>
        <li>
          <article class="clear">
            <figure>
              <img src="images/demo/180x150.gif" alt="" />
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>
                  content content content
                  <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our
                  <a href="https://www.os-templates.com/template-terms">website template licence</a
                      >.
                    </p>
                    <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
    </section>
  </div>

  <div id="content">
    <section id="services" class="last clear">
      <ul>
        <li>
          <article class="clear">
            <figure>
              <img src="images/demo/180x150.gif" alt="" />
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>
                  content content content
                  <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our
                  <a href="https://www.os-templates.com/template-terms">website template licence</a
                      >.
                    </p>
                    <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
    </section>
  </div>
</div>

Answer 3

If you are looking for a way how to display each article next to each other in a row I would suggest using Flexbox for creating the layout.

In this case, you can add display flex to you class wrapper in CSS:

.wrapper {
  display: flex;
  flex-direction: row;
}