создайте 4 колонки в html - PullRequest
Новая
       10

создайте 4 колонки в html

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

Это может быть легко сделать, но я борюсь с утра. Я пытаюсь создать сетку из 4 столбцов, как показано ниже, где значения для всех 4 столбцов создаются путем запуска для l oop. enter image description here

Вот html Я создал 

  <template for:each={provinces} for:item="province">
    <div class="province-section" key={province.key}>
      <div>{province.province}</div>
      <div>{province.stats}</div>
    </div>
  </template>

CSS

 .province-section {
    display: grid;
    grid-gap: 10px;
    grid-template-rows: repeat(4, auto);
 }

Пожалуйста, сообщите!

РЕДАКТИРОВАТЬ: Добавлен вывод кода выше:

Я использую систему шаблонов Salesforce. У меня проблема в том, что число столбцов может составлять go максимум до 4, но иногда оно может быть ниже этого значения, и значения для столбцов также не задаются заранее. Ниже я добавляю вывод моего текущего кода. В приведенном ниже выводе значения Альберта и его статистика ниже должны быть на одном уровне, а Брити sh Колумбия, что я и пытался делать с утра.

enter image description here

Ответы [ 2 ]

4 голосов
/ 09 апреля 2020
  1. Если вы хотите создать сетку - display: grid должен находиться в контейнере элементов (не на каждом элементе).
  2. Если вы хотите иметь 4 столбца, вы, вероятно, захотите использовать grid-template-columns: repeat(4, 1fr);
  3. Обратите внимание, что в вашем примере используется некоторая система шаблонов, которая не является стандартной частью html. Когда вы публикуете здесь, вы должны также упомянуть, какую систему шаблонов вы используете, или другой вариант - добавить вывод html (после обработки вашей системы шаблонов).

Вот рабочий пример: 

.grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}
<div class="grid-wrapper">
    <div class="province-section" key={province.key}>
        <div>Province</div>
        <div>Stats</div>
    </div>
    <div class="province-section" key={province.key}>
        <div>Province</div>
        <div>Stats</div>
    </div>
    <div class="province-section" key={province.key}>
        <div>Province</div>
        <div>Stats</div>
    </div>
    <div class="province-section" key={province.key}>
        <div>Province</div>
        <div>Stats</div>
    </div>
</div>
1 голос
/ 09 апреля 2020

Это сетка из четырех столбцов, которая может содержать текст в столбцах 

<!-- HTML -->
<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

/* CSS */
.column {
  float: left;
  width: 25%;
}

/* this will clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
...