Чередование CSS Сетка столбцов и мобильный вид - PullRequest
Новая
       6

Чередование CSS Сетка столбцов и мобильный вид

1 голос
/ 04 марта 2020

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

В первом столбце первой строки приведено описание службы. Во втором столбце есть изображение, представляющее службу.

В каждой строке чередуются описание и изображение, поэтому во втором ряду, первом столбце, есть изображение, а во втором столбце есть описание. Посмотрите на прилагаемое изображение, чтобы увидеть, над чем я работаю до сих пор (примечание: я изменил размеры изображений, чтобы было проще сделать снимок экрана).

Мобильная версия CSS Grid представляет собой один столбец , Когда в мобильной версии отображается одно и то же содержимое, макет больше не работает. Поскольку мой макет определяется содержимым HTML (вероятно, это плохо, я знаю), заголовки не всегда отображаются над изображением, что я и хочу. См. В приложении, чтобы увидеть проблему.

Я полагаю ответ на решение этой проблемы заключается в использовании flex-direction: row-reverse; однако, довольно трудно найти несколько хороших примеров (возможно, я просто поиск неправильный путь). Лучший Codepen, который я смог найти, делает то, что я хочу, используя flex-direction, но он не очень хорошо помещает описание в один блок CSS Grid, а изображение - в другой блок CSS Grid, поэтому при изменении размера браузера изображения перекрываются текст ... это, вероятно, из-за отсутствия у меня знаний об использовании Flexbox (все еще учусь).

Не могли бы вы помочь мне понять, как правильно создать чередующийся список из 2 столбцов, который также отображает текст и Правильно ли использовать изображение в списке из 1 столбца?

Я бы предпочел остаться в мире сценариев CSS Grid / Flexbox / no, но я с удовольствием расскажу о других идеях.

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

HTML

<!-- Services area -->
<div class="services-area">
    <div class="services-text">
        <h3>This is service 1</h3>
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-transformation.png" alt="Agile transformation image.">
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-coaching.png" alt="Agile transformation image.">
    </div>
    <div class="services-text">
        <h3>This is service 2</h3>
    </div>
    <div class="services-text">
        <h3>This is service 3</h3>
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-sw-implementation.png" alt="Agile transformation image.">
    </div>
</div>

CSS

// layout for services

// display a stacked grid <767 pixels
.services-area {
    grid-area: svcs;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    @if $debug { background-color: $debugServicesArea; }
} 

// display a 2-column grid >768
@include for-size(full-size) {
    .services-area {
    grid-area: svcs;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-left: $gridMarginLeft;
    margin-right: $gridMarginRight;

    @if $debug { background-color: $debugServicesArea; }
    }
}

.services-text {
    display: grid;
    align-items: center;
    justify-content: center;
}

.services-image {
    max-width: 100%;
    height: auto;
}

Working version of the code in a 2-column layout. Images re-sized so I could take a screen capture. Non-working version when displaying in a mobile 1-column format.

1 Ответ

0 голосов
/ 19 марта 2020

В целях обеспечения доступности и улучшения SEO сохраняйте разметку в логическом порядке (заголовок, изображение).

На мобильных устройствах вам вообще не нужна сетка, используйте display:block для контейнера. Используйте grid-auto-flow: row dense, чтобы заполнить сетку максимально плотно, следуя порядку строк. Это гарантирует, что ячейка сетки не будет пустой. Затем чередуйте элементы заголовка, указав столбец, с которого они должны начинаться. Вы можете использовать селектор брата :nth-child(), чтобы выбрать заголовки, начиная с 3-го и затем каждые 4 (4n - 1 означает 4 * 0 - 1 = -1 (недопустимый брат, пропуск); 4 * 1 - 1 = 3; 4 * 2 - 1 = 7; ...). 

/* display a stacked grid <767 pixels */
.services-area {
    display: block;
} 

/* display a 2-column grid >768 */
@media (min-width: 768px) {
  .services-area {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      justify-content: center;
      grid-auto-flow: row dense;
  }
}

.services-area > :nth-child(4n - 1) {
  grid-column-start: 2;

}

.services-image {
    max-width: 100%;
    height: auto;
}
...