Блог

Главная - Вопросы по программированию - отсчитайте элемент сетки без перемещения элемента

отсчитайте элемент сетки без перемещения элемента

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

Я хочу использовать CSS grid для определенного контейнера. Но есть один прямой потомок, которого я не хочу использовать в качестве элемента сетки. Есть ли свойство или метод для этого? Я не хочу менять местоположение в моем HTML.

Элемент h2 я не хочу использовать в качестве элемента сетки.

         <article id="main-diagram"> //CSS grid
        <h2>Ingescheven ouders</h2> // this is the descendant
        <ul id="diagram-times">
            <li>18:00</li>
            <li>19:00</li>
            <li>20:00</li>
            <li>21:00</li>
        </ul>
        <section class="main-diagram-1">
            <p>30%</p>
        </section>
        <section class="main-diagram-2">
            <p>40%</p>
        </section>
        <section class="main-diagram-3">
            <p>50%</p>
        </section>
        <section class="main-diagram-4">
            <p>60%</p>
        </section>
        <ul id="diagram-places">
            <li>12/30</li>
            <li>14/32</li>
            <li>10/20</li>
            <li>32/33</li>
        </ul>
    </article>

Спасибо!

ps: css пока нет

Комментарии:

1. идея состоит в том, чтобы сделать так, чтобы он охватывал всю первую строку, тогда вы начнете свою сетку со второй строки.

Ответ №1:

Вы можете использовать свойство css grid-template-areas: , чтобы указать, какие элементы должны отображаться и где.

Пример использования вашего кода:

 #diagram-times {grid-area: topleft}
.main-diagram-1 {grid-area: topright;}
.main-diagram-2 {grid-area: botleft;}
.main-diagram-3 {grid-area: botright;}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: auto;
  grid-template-areas: 
  "topleft topright"
  "botleft botright"
}

Отличное руководство по сетке.