How to justify three columns in CSS Grid layout?

1
votes

I am trying to use grid layout in CSS to place three boxes in one div (container). There will be only one row. Box 1 will stay close to the left side, box3 close to the right side and box2 in the center. Also all boxes should be vertically in the middle.

Something like this picture

this is my code but I cannot make it the way I described. 

.statusBar{
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 50px 1fr 50px 1fr 50px;
  grid-column-gap: auto;
}
.statusBar > div{
  border: 1px solid #000;
}
  <div class='statusBar'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

It is better if the size of each small box is on auto-fill and a the boxes should not stick to the edges. For example 10px space.

How can I make it work?

6
htmlcsscss-grid

6 Answers

3
votes

Use the justify properties on the container and child div like so:

.statusBar {
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
}

.statusBar>div {
  border: 1px solid #000;
}

.statusBar div:first-of-type {
  justify-self: start;
}

.statusBar div:last-of-type {
  justify-self: end;
}
<div class='statusBar'>
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem</div>
  <div>Lorem ipsum dolor sit amet.</div>
</div>
2
votes

You can do something like this using grid-gap and place-self

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1, .item2, .item3 {
  place-self: center;
}

.item1, .item3 {
  width: 200px;
}

.item2 {
  width: 100px;
}

</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
</div>

</body>
</html>
2
votes

If you only want 3 boxes, then your grid-template-columns should only be 3 values:

grid-template-columns: auto 1fr auto;

Also, you can use a value in your grid-column-gap:

grid-column-gap: 20%;

or even better, just use justify-content: space-between. For example:

.statusBar {
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 100px 50px 100px;
  justify-content: space-between;
}
1
votes

You can use Flex for this. Here is an example of how it will work. also for the left and right div's you can set them to a percent width or a hard px width. and the center will "flex" to fill the space with a 10px margin still. this is achieved with the container receiving the display: flex and the main "flex" container getting flex: 1; style.

.statusBar{
      border: 1px solid #999;
      display: flex;
      grid-template-columns: 50px 1fr 50px 1fr 50px;
      justify-content: space-between;
    }

    .statusBar div{
      border: 1px solid #000;
      padding: 0 10px;
      text-align: center;
      width: 15%;
    }
    
    .statusBar div.center{
      flex: 1;
      margin: 0 10px;
    }
<div class='statusBar'>
        <div>Donec rhoncus convallis consequat. Aliquam pellentesque rhoncus lacinia. Donec luctus dolor sit amet lorem feugiat maximus. Nulla eu semper odio. Mauris accumsan, nisl id mattis interdum, orci velit varius magna, nec vehicula nisl ligula vitae enim. Duis finibus tellus in quam efficitur.</div>
        <div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel placerat turpis, eget rhoncus odio. In quis quam in lacus tincidunt gravida eu vitae elit. Aliquam convallis sed nunc sit amet cursus. Quisque dictum enim eget tincidunt faucibus. Sed non diam semper, vehicula augue blandit, tincidunt neque. Nunc egestas, mi vel porttitor pellentesque, magna sapien tempus orci, ac pellentesque ligula libero a felis. Donec rhoncus convallis consequat. Aliquam pellentesque rhoncus lacinia. Donec luctus dolor sit amet lorem feugiat maximus. Nulla eu semper odio. Mauris accumsan, nisl id mattis interdum, orci velit varius magna, nec vehicula nisl ligula vitae enim. Quisque ullamcorper congue felis, sagittis dictum neque semper quis. Quisque pretium porta nisi vel malesuada. Donec lacus sapien, pellentesque a porttitor ut, vulputate a arcu. Duis finibus tellus in quam efficitur, ac gravida felis pharetra.</div>
        <div>Mauris accumsan, nisl id mattis interdum, orci velit varius magna, nec vehicula nisl ligula vitae enim. Quisque ullamcorper congue felis, sagittis dictum neque semper quis. Quisque pretium porta nisi vel malesuada. Donec lacus sapien, pellentesque a porttitor ut, vulputate a arcu.</div>
      </div>
1
votes

An easy way to add to your existing code could be to add <div>s in between to be the gaps. These would take up the 1fr and automatically fill it.

It probably not the best way if these <div>s are going to be empty, but it gives you freedom to add something into the gaps later on.

.statusBar{
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 50px 1fr 50px 1fr 50px;
  grid-column-gap: auto;
}
.statusBar > div{
  border: 1px solid #000;
}
  <div class='statusBar'>
    <div>1</div>
    <div></div>
    <div>2</div>
    <div></div>
    <div>3</div>
  </div>
0
votes

To do what you want is easy: you should use Flexbox instead of Grid Layout. To start using the Flexbox model, you need to first define a flex container.

Example: The space-around value displays the flex items with space before, between, and after the lines:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Check out the following example:

.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

Source: https://www.w3schools.com/css/css3_flexbox.asp