Блог

Главная - Вопросы по программированию - Как мне переместить три ячейки сетки в верхнюю часть сетки?

Как мне переместить три ячейки сетки в верхнюю часть сетки?

#html #css

Вопрос:

Я учусь работать с «сеткой» и попал в тупик. Я хочу переместить последние три ячейки в верхнюю часть сетки, чтобы я мог поместить заголовки перед содержимым, но не знаю, как это сделать. Любая помощь будет признательна. введите описание изображения здесь

HTML:

   <div class="gridWrapper">
    <div class="gridBox heading1">Heading</div>
    <div class="gridBox heading2">Heading</div>
    <div class="gridBox heading3">Heading</div>
    <div class="gridBox a">A</div>
    <div class="gridBox b">B</div>
    <div class="gridBox c">C</div>
    <div class="gridBox d">D</div>
    <div class="gridBox e">E</div>
    <div class="gridBox f">F</div>
  </div>

CSS:

 .gridWrapper {
  color: white;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 500px 500px 100px;
  background-color: transparent;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 100px;
  justify-content: center;
}

.gridBox {
  background-color: white;
  color: black;
  margin: 0px;
  border-radius: 5px;
  padding: 20px;
  font-size: 100%;
}

.a {
  grid-area: 1 / 2 / 2 / 3;
}
.b {
  grid-area: 2 / 2 / 3 / 3;
}
.c {
  grid-area: 2 / 3 / 3 / 4;
}
.d {
  grid-area: 1 / 1 / 1 / 2;
}
.e {
  grid-area: 2 / 1 / 3 / 2;
}
.f {
  grid-area: 1 / 3 / 2 / 4;
}

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

1. .Заголовки сетки не соответствуют ни одному из ваших HTML-файлов. Вероятно, вам нужно что-то похожее [class*='heading'] для выбора ваших заголовков . Первая строка уже заполнена буквой D A F , и следующая тоже заполнена. Вы должны сбросить область сетки для каждого из них, чтобы изменить порядок расположения.

2. Заголовки .grid были из предыдущего теста, извините за это, я удалил его. Также не могли бы вы подробнее рассказать о том, что означает D A F? А также что вы подразумеваете под тем, как они заполнены? Правка: Я предполагаю, что вы имеете в виду ячейки D, A, F? Какова будет область сетки, которую мне нужно выполнить, сначала имея 3 ячейки заголовка?

3. D A F- <div class="gridBox a">A</div> <div class="gridBox b">B</div> <div class="gridBox c">C</div> <div class="gridBox d">D</div> <div class="gridBox e">E</div> <div class="gridBox f">F</div> это положение на первой строке в области сетки правил, которую вы для них установили.

4. Ах, мозговой пердеж, извини за это. Какова была бы идеальная область сетки для каждого из них, чтобы три ячейки заголовка были сверху?

5. Вместо области сетки вы можете использовать порядок, чтобы упростить чтение и настройку . возможный пример для ваших классов a..f : .d {order: 1;}.a {order: 2;}.f {order: 3;}.e {order: 4;}.b,.c {order: 5;}

Метки: