Как удалить пробелы в сетке, когда столбцы отсутствуют? - PullRequest
Новая
       6

Как удалить пробелы в сетке, когда столбцы отсутствуют?

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

У меня есть раздел html, который должен отображаться определенным образом, но некоторые элементы могут быть необязательными, и я не уверен, что могу сделать это с display:grid.

Мне нужно иметь 3 столбца, но первый и последний являются необязательными, и мне нужно удалить пробел, если их нет.

Обратите внимание, что разметка должна быть этой без дополнительной оболочки: 

.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 0 20px;
  align-items: center;
  background-color: lightgrey;
}
.grid > .image {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: red;
}
.grid > .title {
  grid-column: 2;
  background-color: blue;
}
.grid > .description {
  grid-column: 2;
  background-color: purple;
}
.grid > .button {
  grid-column: 3;
  grid-row: 1 / span 2;
  background-color: green;
}
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>Unwanted gap when no image :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>Unwanted gap when no image or button :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
</div>

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Положитесь на неявное создание столбца и сохраняйте только один явный столбец 

.grid {
  display: grid;
  grid-template-columns:  1fr; /* one column here */
  grid-gap: 0 20px;
  align-items: center;
  background-color: lightgrey;
}
.grid > .image {
  grid-column: -3; /* this will create an implicit column at the start */
  grid-row: span 2;
  background-color: red;
}
.grid > .title {
  background-color: blue;
}
.grid > .description {
  background-color: purple;
}
.grid > .button {
  grid-column: 2; /* this will create an implicit column at the end */
  grid-row:1/ span 2;
  background-color: green;
}
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
</div>
<p>&nbsp;</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
</div>
0 голосов
/ 27 марта 2020

Вместо использования пробелов сетки используйте поля для отдельных элементов. 

.grid {
  display: grid;
  grid-auto-columns: auto 1fr auto;
  /* grid-gap: 0 20px; */
  align-items: center;
  background-color: lightgrey;
}

.grid > .image {
  margin-right: 20px; /* new */
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: red;
}

.grid > .button {
  margin-left: 20px; /* new */
  grid-column: 3;
  grid-row: 1 / span 2;
  background-color: green;
}

.grid > .title {
  grid-column: 2;
  background-color: blue;
}

.grid > .description {
  grid-column: 2;
  background-color: purple;
}
<div class="grid">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>NO unwanted gap when no image :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
  <div class="button">button</div>
</div>
<p>&nbsp;</p>
<p>NO unwanted gap when no image or button :</p>
<div class="grid">
  <div class="title">title</div>
  <div class="description">description</div>
</div>
...