Search code examples
csscss-grid

CSS Grid - using grid-template-columns without creating empty div's

I want to create a screen where there is only one div, who is centered and takes 33% of the screen in size. Both right and left to it is empty. What I do is : 

.loginScreenContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

And create 3 elements which two are empty. 

 <div className='loginScreenContainer'>
      <div>Empty</div>
      <div>Actual Content</div>
      <div>Empty</div>
 </div>

It feels awkward. Is there another way?

Solution

  • Just add grid-column: 2 to your content. Then the content will be in the correct column.

    .loginScreenContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.content {
  grid-column: 2;
}
    <div class='loginScreenContainer'>
  <div class="content">Actual Content</div>
</div>

    Here's a great guide for a lot of css-grid properties: https://css-tricks.com/snippets/css/complete-guide-grid/