Расположение элементов списка с использованием сетки в CSS - PullRequest
Новая
       3

Расположение элементов списка с использованием сетки в CSS

0 голосов
/ 14 января 2020

Я пытаюсь реализовать сетку в css, которая содержит две строки, первая строка имеет 3 столбца, каждый столбец которых содержит один из элементов li, а вторая строка содержит четвертый элемент li из неупорядоченного списка. Я обязан не изменять код html. Ps. это для целей обучения, поэтому любая помощь очень ценится. 

.unordered_list {
  display: grid;
}
<ul class="unordered_list">
  <li>
      <img src="logo.png" alt="car">
      <p>It should be column of 3</p>
  </li>
  <li>
      <img src="logo.png" alt="car">
      <p>It should be column of 3</p>
  </li>
  <li>
      <img src="logo.png" alt="car">
      <p>It should be column of 3</p>
  </li>
  <li>
      <h2>Head H2 Text</h2>
      <p>Should be a row</p>
  </li>
</ul>

Ответы [ 3 ]

1 голос
/ 14 января 2020

Вы можете использовать области сетки: 

.unordered_list {
  display: grid;
  grid-template-areas:
    "a b c"
    "d d d";
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
}
<ul class="unordered_list">
      <li class="a">
        <img src="logo.png" alt="car" />
        <p>It should be column of 3</p>
      </li>
      <li class="b">
        <img src="logo.png" alt="car" />
        <p>It should be column of 3</p>
      </li>
      <li class="c">
        <img src="logo.png" alt="car" />
        <p>It should be column of 3</p>
      </li>
      <li class="d">
        <h2>Head H2 Text</h2>
        <p>Should be a row</p>
      </li>
    </ul>
0 голосов
/ 14 января 2020

Вам необходимо нарисовать столбцы и строки, используя grid-template-columns и grid-template-rows на элементе контейнера.

затем укажите начало и конец каждого элемента сетки, используя grid-column: <start-line> / <end-line> и grid-row: <start-line> / <end-line>

Нажмите здесь, чтобы прочно проиллюстрировать руководство по использованию сетки

и предварительный просмотр включенного мною фрагмента для решения нужной сетки.

** Фрагмент отредактирован для более простого решения 

.unordered_list {
  display: grid;
  width: 300px;
  height: 200px;
  grid-template-columns: repeat(3, 100px [col-start]);
  grid-template-rows: 50% 50%;
  list-style: none;
}

li {
  text-align: center;
  padding: 10px;
  border: 1px solid #eee;
}

.unordered_list li:last-child {
  grid-column: 1 / 4;
}
<ul class="unordered_list">
  <li>
    <img src="logo.png" alt="car">
    <p>It should be column of 3</p>
  </li>
  <li>
    <img src="logo.png" alt="car">
    <p>It should be column of 3</p>
  </li>
  <li>
    <img src="logo.png" alt="car">
    <p>It should be column of 3</p>
  </li>
  <li>
    <h2>Head H2 Text</h2>
    <p>Should be a row</p>
  </li>
</ul>
0 голосов
/ 14 января 2020

Проверьте CSS генератор сетки, такой как этот , это сделает его намного проще для визуализации. Он выдаст вам базовый код, и тогда вы сможете его выяснить.

...