Как иметь разную ширину столбцов в строках в сетке CSS? - PullRequest
Новая
       20

Как иметь разную ширину столбцов в строках в сетке CSS?

0 голосов
/ 13 апреля 2020

Мне нужно создать элементы сетки, показанные на картинке. Первый предмет должен составлять 45%, а второй и третий предмет должен составлять 52,5%, а остальные предметы должны составлять 50% каждый. Я не могу изменить HTML как все дочерние элементы сетки, идущие от L oop. Таким образом, я не могу достичь этого с помощью CSS написанного, проверьте фрагмент, моим css возможно только, чтобы ширина левой стороны всех элементов составляла 50% или 45%, но как изменить ширину элементов от 4 до остальных предметов.

Возможно ли это без изменения HTML?

enter image description here

.atul {
  display: grid;
  grid-template-columns: 45% 52.5%;
  grid-template-rows: auto;
  grid-gap: 2.5%;
  grid-template-areas: "card1 card2" 
                       "card1 card3";
}

.card:nth-child(1) {
  grid-area: card1;
}

.card:nth-child(2) {
  grid-area: card2;
}

.card:nth-child(3) {
  grid-area: card3;
}
<div class="atul">
  <div class="card" style="background-color: red;">Card 1</div>
  <div class="card" style="background-color: green;">Card 2</div>
  <div class="card" style="background-color: yellow;">Card 3</div>
  <div class="card" style="background-color: skyblue;">Card 4</div>
  <div class="card" style="background-color: skyblue;">Card 5</div>
  <div class="card" style="background-color: skyblue;">Card 6</div>
  <div class="card" style="background-color: skyblue;">Card 7</div>
  <div class="card" style="background-color: skyblue;">Card 8</div>
  <div class="card" style="background-color: skyblue;">Card 9</div>
  <div class="card" style="background-color: skyblue;">Card 10</div>
  <div class="card" style="background-color: skyblue;">Card 11</div>
  <div class="card" style="background-color: skyblue;">Card 12</div>
  <div class="card" style="background-color: skyblue;">Card 13</div>
</div>

1 Ответ

1 голос
/ 13 апреля 2020

Чтобы сделать это, вам нужно найти общий делитель для всех трех длин (42,5%, 48,75% и 52,5%). С помощью общего делителя вы можете создать нужное количество столбцов для размещения каждой области сетки.

В моем примере ниже я создал 400 столбцов шириной 0,25% каждый (400 * .25 = 100%).

Затем он охватывает области сетки по правильному количеству столбцов: 

45.00 / .25 = 180

48.75 / .25 = 195

52.50 / .25 = 210

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

Без изменений HTML. 

.atul {
  display: grid;
  grid-template-columns: repeat(400, .25%);
  grid-auto-rows: 50px; /* for demo only */
  grid-row-gap: 30px;   /* note that you need to create column gaps through
                           the proper distribution of columns, because if you
                           use `grid-column-gap`, it will add a gap between
                           all 400 columns */
}

.card:nth-child(1) {
  grid-column: 1 / 180;
  grid-row: 1 / 3;
}

.card:nth-child(2) {
  grid-column: -1 / -210; /* starting at the end line of the grid
                             (works only in explicit grids) */
  grid-row: 1 / 2;
}

.card:nth-child(3) {
  grid-column: -1 / -210;
  grid-row: 2 / 3;
}

/* starting at the 4th item, target even items only */
.card:nth-child(n + 4):nth-child(even) {
  grid-column: 1 / 195;
}

.card:nth-child(n + 4):nth-child(odd) {
  grid-column: -1 / -195;
}

.card:nth-child(4),
.card:nth-child(5) {
  grid-row: 3;
}

.card:nth-child(6),
.card:nth-child(7) {
  grid-row: 4;
}

.card:nth-child(8),
.card:nth-child(9) {
  grid-row: 5;
}

.card:nth-child(10),
.card:nth-child(11) {
  grid-row: 6;
}

.card:nth-child(12),
.card:nth-child(13) {
  grid-row: 7;
}
<div class="atul">
  <div class="card" style="background-color: red;">Card 1</div>
  <div class="card" style="background-color: green;">Card 2</div>
  <div class="card" style="background-color: yellow;">Card 3</div>
  <div class="card" style="background-color: skyblue;">Card 4</div>
  <div class="card" style="background-color: skyblue;">Card 5</div>
  <div class="card" style="background-color: skyblue;">Card 6</div>
  <div class="card" style="background-color: skyblue;">Card 7</div>
  <div class="card" style="background-color: skyblue;">Card 8</div>
  <div class="card" style="background-color: skyblue;">Card 9</div>
  <div class="card" style="background-color: skyblue;">Card 10</div>
  <div class="card" style="background-color: skyblue;">Card 11</div>
  <div class="card" style="background-color: skyblue;">Card 12</div>
  <div class="card" style="background-color: skyblue;">Card 13</div>
</div>

jsFiddle demo

...