CSS grid is overflowing

Question

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


    
        
          
            
              
                
                  
                    Indonectetus facilis leo nibh
                    content content content link to other content. For full terms of use of this template please read our website template licence.
                    Read More »
                  
                
              
            

          
        
      
   
    
    
        
            
            
                
                
                    
                    Indonectetus facilis leo nibh
                    content content content link to other content. For full terms of use of this template please read our website template licence.
                    Read More »

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.

user_15545116 · Answer

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;
}


  
    
      
        
          
            
              
              
                Indonectetus facilis leo nibh
                
                  content content content
                  link to other content. For full terms of use of this template please read our
                  website template licence.
                    
                    Read More »
              
            
          
        
      
    
  

  
    
      
        
          
            
              
              
                Indonectetus facilis leo nibh
                
                  content content content
                  link to other content. For full terms of use of this template please read our
                  website template licence.
                    
                    Read More »

user_2518285 · Answer

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;

}


    
        
          
            
              
                
                  
                    Indonectetus facilis leo nibh
                    content content content link to other content. For full terms of use of this template please read our website template licence.
                    Read More »
                  
                
              
            

          
        
      
   
    
    
        
            
            
                
                
                    
                    Indonectetus facilis leo nibh
                    content content content link to other content. For full terms of use of this template please read our website template licence.
                    Read More »

user_13647969 · Answer

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;
}

CSS grid is overflowing

3 Answers

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

2) If you need only 3 columns