CSS Шаблон повторения сетки - PullRequest
Новая
       5

CSS Шаблон повторения сетки

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

мой код выглядит следующим образом. Это работает, но очень повторяется. Кто-нибудь знает, как сделать это чище? Я думаю, что мы должны использовать повтор или nth child?

enter image description here

Я немного новичок в html и css, извините за плохой код. Спасибо! 

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, auto);
  grid-gap: 10px;
  padding: 10px;
}
.item1 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 2;
  grid-column-end: 8;
}

.item2 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 4;
}
.item3 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 4;
  grid-column-end: 6;
}
.item4 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 6;
  grid-column-end: 8;
}
.item5 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 4;
  grid-column-end: 6;
}
.item7 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 6;
  grid-column-end: 8;
}

et c ...

Ответы [ 3 ]

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

Хотя вы можете справиться с этим с помощью nth-child, использование классов является более понятным способом.

Вам требуется минимум 100 * * двенадцать столбцов, поскольку у вас есть элементы, которые охватывают 1/3 , 1/2 и все столбцы.

Вы не можете разбить сетку из 8 столбцов на трети.

Итак, просто примените классы, чтобы указать, сколько столбцов в каждом div должен охватывать следующим образом: 

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  text-align: center;
  gap: .25em;
  margin: 1em;
}

.item {
  border: 1px solid grey;
}

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

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

.span-4 {
  grid-column: span 4;
}
<div class="container">
  <div class="item span-12">Item 1</div>
  <div class="item span-4">Item 2</div>
  <div class="item span-4">Item 3</div>
  <div class="item span-4">Item 4</div>
  <div class="item span-4">Item 5</div>
  <div class="item span-4">Item 6</div>
  <div class="item span-4">Item 7</div>
  <div class="item span-6">Item 8</div>
  <div class="item span-6">Item 9</div>
  <div class="item span-12">Item 10</div>
</div>
0 голосов
/ 12 марта 2020

Вы можете попробовать что-то вроде ниже: 

.grid-container {
  display: grid;
  grid-gap: 10px;
}

.grid-container>div {
  grid-column: span 2;
  border: 1px solid;
  height: 20px;
}

.grid-container>div:nth-child(9n + 1) {
  grid-column: span 6;
}

.grid-container>div:nth-child(9n - 1),
.grid-container>div:nth-child(9n) {
  grid-column: span 3;
}
<div class="grid-container">
  <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></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
0 голосов
/ 12 марта 2020
  1. Первое разделение общих стилей и отдельных стилей. Затем используйте Class для общего и ID для отдельного.

Разница между идентификатором и классом заключается в том, что идентификатор может использоваться для идентификации одного элемента, тогда как класс может использоваться для идентификации более одного , В CSS селектор класса - это имя, которому предшествует точка («.»), А селектор идентификатора - это имя, которому предшествует символ ha sh («#»).

Если у вас повторяющиеся шаблоны, используйте repeat ()

https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

Если вы указали c logi c или формулу, вы можете использовать nth-child (n), где n может быть числом, ключевым словом или формулой

https://developer.mozilla.org/en-US/docs/Web/CSS/: п-й ребенок

...