Как я могу создать адаптивную сетку css (display: grid), которая имеет три одинаковых поля в верхней строке, а остальные строки - это два блока одинакового размера? - PullRequest
Новая
       8

Как я могу создать адаптивную сетку css (display: grid), которая имеет три одинаковых поля в верхней строке, а остальные строки - это два блока одинакового размера?

0 голосов
/ 19 марта 2020

Я хочу создать адаптивную сетку css, которая выглядит следующим образом: 

box | box | box
b o x  |  b o x
b o x  |  b o x

, а затем, когда размер экрана становится достаточно маленьким, все столбцы сворачиваются в один столбец с каждым включенным квадратом. его собственная строка.

Возможно ли это?

Редактировать: Для всех, у кого есть эта проблема, изменение числа столбцов с помощью медиазапроса с 6 на 1 не работало. Однако у меня была идея сделать так, чтобы все элементы занимали 6 столбцов в точке разрыва, и это сработало отлично. Это дополнение к ответу Лоуренса-Витта и Пола ie -d.

Ответы [ 3 ]

2 голосов
/ 19 марта 2020

Вот один из способов сделать это, используя функцию nth-child. Чтобы адаптировать сетку, вы просто добавляете медиа-запрос , который изменяет стиль ячеек и сетки на определенной ширине экрана. 

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.cell {
  border: 1px solid black;
  grid-column: span 3;
}

.cell:nth-child(1),
.cell:nth-child(2),
.cell:nth-child(3){
  grid-column: span 2;
}
<div class="grid">
  <div class="cell">One</div>
  <div class="cell">Two</div>
  <div class="cell">Three</div>
  <div class="cell">Four</div>
  <div class="cell">Five</div>
  <div class="cell">Six</div>
  <div class="cell">Seven</div>
</div>
2 голосов
/ 19 марта 2020

При использовании сетки столбцов SIX 

.item {
  height: 3em;
  border: 2px solid green;
}

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 4px;
  width: 90%;
  margin: 1em auto;
}

.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
  grid-column: span 2
}

.item:nth-child(4),
.item:nth-child(5) {
  grid-column: span 3;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

После этого достаточно добавить медиа-запрос, чтобы свернуть сетку в один столбец в соответствующей точке останова,

0 голосов
/ 19 марта 2020

Используя CSS flex layout и CSS media query, вы можете достичь своих потребностей. См. Приведенный ниже код: если размер экрана уменьшится до 600 пикселей, он изменится на макет с одним столбцом. 

.container {
      display: flex;
      width: 100%;
      justify-content: space-between;
      flex-direction: row;
      margin-bottom: 10px;
    }
    .three-box-row > div {
      width: 33%;
      height: 50px;
    }
    .two-box-row > div {
      width: 49%;
      height: 50px;
    }
    
    @media only screen and (max-width: 600px) {
      .container {
        flex-direction: column;
      }
      .container > div {
        width: 100%;
      }
    }
  <body>
    <div class="three-box-row container">
      <div style="background-color: red;">Box 1</div>
      <div style="background-color: green;">Box 2</div>
      <div style="background-color: blue;">Box 3</div>
    </div>
    <div class="two-box-row container">
      <div style="background-color: red;">Box 1</div>
      <div style="background-color: green;">Box 2</div>
    </div>
    <div class="two-box-row container">
      <div style="background-color: green;">Box 1</div>
      <div style="background-color: blue;">Box 2</div>
    </div>
  </body>
...