CSS Grid Layout - сетка-строка-пробел каждые 2 строки - PullRequest
Новая
       19

CSS Grid Layout - сетка-строка-пробел каждые 2 строки

0 голосов
/ 05 июля 2019

Можно ли иметь сетку с пропусками в строках, но этот промежуток составляет только каждые 2 строки?Или есть граница каждые 2 ряда?

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

Пример кода: 

body{
  background-color:gray;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 5px;
  grid-template-rows: repeat(12,20px);
  border: 1px solid black;
  background-color:lightgray;
}

.grid > div {
  background: lightblue;
  border: 1px solid cadetblue;
}



#element{
  grid-row: 5 / span 3;
}
The lightgrey element should have lines/borders every second grid row
<div class="grid">
  <div id="element">Element</div>
</div>

Пример макета:

Example Layout

Элемент Span над ним:

Span Element over it

Другие решения также приветствуются.

Ответы [ 5 ]

0 голосов
/ 05 июля 2019

У меня есть решение.поместите элементы hr с абсолютным положением и сделайте их большими, чтобы обтекать все.z-index разместит строку под моим элементом. 

body{
  background-color:gray;
}

.grid {
  display: grid;
  grid-template-columns: 0.1fr 1fr 0.1fr;
  grid-gap: 5px;
  grid-template-rows: repeat(18, 15px);
  border: 1px solid black;
  background-color:lightgray;
}

#element{
  grid-column:2;
  grid-row: 3 / span 6;
  background-color:green;
  z-index:3;
  margin: 5px;
}

.H1{
  grid-column:1;
  grid-row: 1;
}
.H2{
  grid-column:1;
  grid-row: 7;
}

.H3{
  grid-column:1;
  grid-row: 13;
}

.Hr{
  position: absolute;
  background-color: black;
  height: 2px;
  width:100%;
}

.Vr{
    position: absolute;
  background-color: black;
  width: 2px;
  height:100%;
}

.V1{
    grid-column:1;
  grid-row: 1;
}

.V1{
    grid-column:3;
  grid-row: 1;
}
<div class="grid">
  <div class="H1"><hr class="Hr" /></div>
  <div class="H2"><hr class="Hr"/></div>
  <div class="H3"><hr class="Hr"/></div>
  <div class="V1"><hr class="Vr" /></div>
  <div class="V2"><hr class="Vr" /></div>
  <div id="element">Element</div>
</div>
0 голосов
/ 05 июля 2019

Да, но путем определения структуры grid-auto-rows для соответствия необходимому дополнительному «пробелу».

Это не семантически, так как мы используем элементы только для стиля и расстояния. 

body {
  background-color: gray;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  grid-auto-rows: 20px 20px 5px;
  border: 1px solid black;
  background-color: lightgray;
}

.grid>div {
  border: 1px solid cadetblue;
  background: lightblue;
}

.item.red {
  background: red;
  grid-column: span 2;
}

.item.spanner {
  grid-row: span 3;
  background: orange;
}
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item red"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item red"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item spanner"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
0 голосов
/ 05 июля 2019

Чтобы иметь разрыв строки каждые две строки, вы можете попробовать установить свойство grid-row-gap для контейнера grid , а затем использовать отрицательные поля и некоторые логика nth-child для настройки пропусков строк (при условии, что это макет с двумя столбцами).

В лучшем случае это взлом, во всяком случае, посмотрите демонстрацию ниже: 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1em;
  grid-auto-rows: 1fr;
  counter-reset: counter;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: lightblue;
  border: 1px solid cadetblue;
}

.grid > div:before {
  counter-increment: counter;
  content: counter(counter);
}

.grid > div:nth-child(4n + 1), .grid > div:nth-child(4n + 2) {
  margin-bottom: -0.5em;
}

.grid > div:nth-child(4n + 3), .grid > div:nth-child(4n + 4) {
  margin-top: -0.5em;
}
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
0 голосов
/ 05 июля 2019

Чтобы охватить элементы, вы можете использовать свойства grid-row-start и grid-row-end, например - 

    .item1 {
      grid-row-start: 3;
      grid-row-end: 6;
      background-color:red;
    }
    
    .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 5px;
  grid-template-rows: repeat(12,20px);
  border: 1px solid black;

}
<div class="grid-container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>  
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
      <div class="item7">7</div>
      <div class="item8">8</div>  
    </div>

Для пропуска строки не используйте grid-row-gap, а просто добавьте поля как 

.grid > div:nth-child(4n + 1), .grid > div:nth-child(4n + 2) {
    margin-top: 1em;
}

.grid > div:nth-child(4n + 3), .grid > div:nth-child(4n + 4) {
    margin-bottom: 1em;
}

вместо добавления отрицательных полей.Это будет работать так же.(лично я не предпочитаю добавлять отрицательные поля, поскольку это усложняет компоновку, но это ваш выбор)

0 голосов
/ 05 июля 2019 

 

<head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="row mb-5 table-bordered">
    <div class="col-12">
      <div class="row">
        <div class="col-6">1</div>
        <div class="col-6">2</div>
      </div>
      <div class="row">
        <div class="col-6">3</div>
        <div class="col-6">4</div>
      </div>
    </div>
  </div>
  <div class="row table-bordered">
    <div class="col-12">
      <div class="row">
        <div class="col-6">A</div>
        <div class="col-6">B</div>
      </div>
      <div class="row">
        <div class="col-6">C</div>
        <div class="col-6">D</div>
      </div>
    </div>
  </div>
</body>
...