Как обосновать три столбца в макете CSS Grid? - PullRequest
Новая
       9

Как обосновать три столбца в макете CSS Grid?

1 голос
/ 14 октября 2019

Я пытаюсь использовать сетку в CSS, чтобы поместить три блока в один div (контейнер). Там будет только один ряд. Box 1 останется близко к левой стороне, box3 близко к правой стороне и box2 в центре. Также все поля должны быть вертикально посередине.

Something like this picture

это мой код, но я не могу сделать его так, как я описал. 

.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>

Лучше, если размер каждой маленькой ячейки находится на автозаполнении, и ящики не должны прилипать к краям. Например, 10px пробел.

Как я могу заставить его работать?

Ответы [ 6 ]

3 голосов
/ 14 октября 2019

Используйте свойства justify для контейнера и дочернего элемента div следующим образом: 

.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 голосов
/ 14 октября 2019

Если вам нужно только 3 поля, тогда ваш grid-template-columns должен иметь только 3 значения: 

grid-template-columns: auto 1fr auto;

Кроме того, вы можете использовать значение в вашем grid-column-gap: 

grid-column-gap: 20%;

или даже лучше, просто используйте justify-content: space-between. Например: 

.statusBar {
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 100px 50px 100px;
  justify-content: space-between;
}
2 голосов
/ 14 октября 2019

Вы можете сделать что-то подобное, используя grid-gap и 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>
1 голос
/ 14 октября 2019

Простой способ добавить к существующему коду может быть добавление <div> s между пробелами. Это займет 1fr и автоматически заполнит его.

Возможно, это не лучший способ, если эти <div> будут пустыми, но это даст вам свободу добавлять что-то в пропуски позже. 

.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>
1 голос
/ 14 октября 2019

Вы можете использовать Flex для этого. Вот пример того, как это будет работать. также для левого и правого делителей вы можете установить для них ширину в процентах или ширину в пикселях. и центр будет «сгибаться», чтобы заполнить пространство с полем в 10 пикселей. это достигается с помощью контейнера, получающего display: flex, и основного «гибкого» контейнера, получающего стиль flex: 1;. 

.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>
0 голосов
/ 14 октября 2019

Сделать то, что вы хотите, легко: вы должны использовать Flexbox вместо Grid Layout. Чтобы начать использовать модель Flexbox, сначала необходимо определить контейнер Flex.

Пример. В значении пробела отображаются элементы Flex с пробелом до, между и после строк: 

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

Проверьте следующий пример: 

.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>

Источник: https://www.w3schools.com/css/css3_flexbox.asp

...