CSS Grid Layout - стиль масонства, но выровнен - PullRequest
Новая
       12

CSS Grid Layout - стиль масонства, но выровнен

0 голосов
/ 11 января 2019

Мне нужно создать адаптивный макет для отображения большого количества данных, которые должны быть доступны на всех устройствах.

Я пытался визуально объяснить, где я хочу попасть на эту картинку: My try

Это мой код для оболочки и панелей. 

.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
background-color: #fff;
color: #444;
}

/* fix for unsuported*/
.wrapper {
display: flex;
flex-wrap: wrap;
}


.panel {
background-color: #EBEBEB;
color: #333;
border-radius: 5px;
padding: 12px;
flex: 1 1 200px;
margin: 4px;
}

1 Ответ

0 голосов
/ 12 января 2019

Возможно, эта разметка может вам помочь, но вам нужно убедиться, что другие стили не переопределяют вашу display: grid, в вашем примере очень вероятно, что свойство display: flex, которое вы объявили после того, как сетка испортила ваши стили 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 5px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
}

.grid-2 {
  grid-column: span 2;
}

.grid-6 {
  grid-column: span 6;
}

.grid-9 {
  grid-column: span 2
}

header {
  padding: 20px;
  background-color: rgba(0, 0, 0, .03);
  ;
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}
<div class="grid-container">
  <div class="grid-item grid-1">
    <header>Grid 1</header>
  </div>
  <div class="grid-item grid-2">
    <header>Grid 2</header>
  </div>
  <div class="grid-item grid-3">
    <header>Grid 3</header>
  </div>
  <div class="grid-item grid-4">
    <header>Grid 4</header>
  </div>
  <div class="grid-item grid-5">
    <header>Grid 5</header>
  </div>
  <div class="grid-item grid-6">
    <header>Grid 6</header>
  </div>
  <div class="grid-item grid-7">
    <header>Grid 7</header>
  </div>
  <div class="grid-item grid-8">
    <header>Grid 8</header>
  </div>
  <div class="grid-item grid-9">
    <header>Grid 9</header>
  </div>
  <div class="grid-item grid-10">
    <header>Grid 10</header>
  </div>
  <div class="grid-item grid-11">
    <header>Grid 11</header>
  </div>
</div>
...