html - 列出元素，第一列有 6 个元素

Question

我已将列表分成两列。根据设计，第一列中必须有 6 个元素。我如何设置它以便将 6 个元素放置在第一列中，并将所有剩余的元素放置在其他列中？现在内容平均分配。

ul {
  columns: 2;
  column-count: 2;
  height: 800px;
  li {
    list-style-type: none;
    padding: 1.25em 0 1.25em 50px;
    font: 20px/24px "PT Root UI";
    color: #272727;
    mix-blend-mode: normal;
    opacity: 0.8;
    display: inline-block;
  }
}

<ul className="about-company-list">
  <li>
    Успешно развивается, создаёт тысячи рабочих мест, оказывает значительное влияние на развитие экономики Казахстана.

  </li>
  <li>
    Строит жилье всех уровней комфортности.
  </li>
  <li>
    Развивает строительство за пределами Казахстана
  </li>

  <li>
    Реализует проекты повышенной сложности для международных
  </li>

  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
</ul>

Answer 1

在现代浏览器中，最简单的方法是使用 display: grid，六行两列；将网格设置为首先填充行(因此它们在第一列中从上到下流动，然后在第二列的顶行继续):

ul {
  /* using CSS Grid Layout: */
  display: grid;

  /* defining the number of columns and rows; here we use
     the repeat() function to create 2 columns, each column
     of one fractional unit ('fr') of the available space
     and six rows, each of one fractional unit of the available
     space: */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);

  /* forcing the grid to place items automatically into the rows
     rather than the columns: */
  grid-auto-flow: rows;
}

li {
  list-style-type: none;
  padding: 1.25em 0 1.25em 50px;
  font: 20px/24px "PT Root UI";
  color: #272727;
  mix-blend-mode: normal;
  opacity: 0.8;
  display: inline-block;
}

<ul className="about-company-list">
  <li>
    Успешно развивается, создаёт тысячи рабочих мест, оказывает значительное влияние на развитие экономики Казахстана.

  </li>
  <li>
    Строит жилье всех уровней комфортности.
  </li>
  <li>
    Развивает строительство за пределами Казахстана
  </li>

  <li>
    Реализует проекты повышенной сложности для международных
  </li>

  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
</ul>

引用资料:

• display .
• grid-auto-flow .
• grid-template-columns .
• grid-template-rows .
• repeat() .

引用书目:

• “A Complete Guide to Grid 。”
• “CSS Grid Layout 。”