Почему моя сетка толкает элемент на дополнительную строку, если я пытаюсь изменить их ориентацию? - PullRequest
Новая
       4

Почему моя сетка толкает элемент на дополнительную строку, если я пытаюсь изменить их ориентацию?

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

Я пытаюсь создать персональную био-страницу с карточками о разных увлечениях / увлечениях, содержащую изображение слева на 1/3 ширины и описание на оставшейся ширине. Я применил сетку к div, содержащему тег img и ap, и использовал свойство столбца grid, чтобы выровнять их. Это прекрасно работало, пока я не решил поменять порядок для каждой карты, имея изображение в оснастке. Это 1/3 карты. По какой-то причине, несмотря на наличие одинаковых правил стиля (за исключением свойства grid-column), элемент p помещается в дополнительную строку. Я могу это исправить, если поменяю местами порядок элементов в HTML, но, похоже, я упускаю суть, я действительно хочу знать, чего мне здесь не хватает 

.card{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    padding: 35px;
    gap: 10px;
}
.card img{
    height: auto;
    width: 90%;
    max-width: 390px;
    grid-column: 1;
}
.card p{
    grid-column: 2/4;
}
.flipped-card img{
    grid-column: 3/4;
}
.flipped-card p{
    grid-column: 1/3;
}
<div class="card">
     <img src="img/code-img.jpg" alt="">
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio saepe deserunt, odio maxime facere officiis rerum quia quasi sunt eaque, laudantium, odit ad inventore obcaecati dolor tempore voluptatibus ab. Beatae.
     </p>
</div>
<div class="flipped-card card">
     <img src="img/code-img.jpg" alt="">
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio saepe deserunt, odio maxime facere officiis rerum quia quasi sunt eaque, laudantium, odit ad inventore obcaecati dolor tempore voluptatibus ab. Beatae.
     </p>
</div>
...