CSS Сетка - перевернуть каждую вторую карту (строки) - PullRequest
Новая
       81

CSS Сетка - перевернуть каждую вторую карту (строки)

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

Я создаю страницу служб с сеткой CSS, я хочу перевернуть все остальные строки. Таким образом, вторая строка имеет изображение слева и текст справа. Третий должен быть таким же, как первый, и так далее. Что было бы самым простым решением?

Спасибо!

Ссылка на Codepen

Example

.servicios-container {}

.servicios-card {
  margin: 100px 200px;
  display: grid;
  align-items: center;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 140px;
}

.servicios-card img {
  width: 100%;
  border-radius: 50px;
}

.servicios-texto h2 {
  font-size: 46px;
}

.servicios-texto p {
  font-size: 20px;
}
<div class="servicios-container">
  <div class="servicios-card">
    <div class="servicios-texto">
      <h2>Edición de audio</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam, nobis quidem eius sit excepturi, minima modi cum, incidunt quo repellat odio adipisci reiciendis quis earum aliquam optio consectetur fugiat.</p>
      <form action="#">
        <button class="contacto-btn m-top" type="submit">Mas información</button>
      </form>
    </div>
    <img src="https://placeimg.com/450/300/tech" />
  </div>

  <!-- this card should have the img on the left-side -->
  <div class="servicios-card">
    <img src="img\Estudio-de-grabación-servicios-Solistas.jpg" alt="">
  </div>

  <!-- this card should have the img on the right-side as the first card -->
  <div class="servicios-card">
    <img src="img\Estudio-de-grabación-servicios-Video.jpg" alt="">
  </div>
</div>

1 Ответ

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

Используйте псевдо-селектор nth-child (even) для нацеливания на все четные элементы и обновления столбцов его дочерних элементов 

.servicios-card:nth-child(even) .servicios-texto {
  grid-column: 2;
}

.servicios-card:nth-child(even) img {
  grid-column: 1;
  grid-row: 1;
}

В вашем случае, поскольку у вас есть неровные столбцы, вам также придется обновить свой сетка для каждого четного элемента 

.servicios-card:nth-child(even) {
    grid-template-columns: 1fr 1.5fr;
}

Редактировать: Существует более умное решение.

Использование областей шаблона сетки сделает его чище

Обновить ваш элемент-обёртка примерно таков: 

.servicios-card {
     margin: 100px 200px;
    display: grid;
    align-items: center;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas:
      "img text";
    grid-gap: 140px;
}

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

Назначить дети к вашим сеткам 

.servicios-card img {
  grid-area: img;
}

.servicios-texto {
  grid-area: text;
}

Затем наведите четные элементы на магию c. 

.servicios-card:nth-child(even) {
  grid-template-areas:
    "text img";
  grid-template-columns: 1fr 1.5fr
}
...