Доброго дня, случилась такая проблема, при добавлении display flex в класс grid-item у меня естественно флексит внутренние элементы в нём,
но так и не понял можно ли исключить сетку внутри grid-item или дело может быть в другом?
Недавно начал учить сетки, не бейте за косяки
Код:
<div class="content">
<div class="grid-items">
<a href="" class="special-grid-item">
<div class="grid-item">
<div class="image object-fit-container cover">
<img src="./img/pic.jpg" alt="">
</div>
<div class="label">
<div class="client">Text</div>
<div class="project">quuntur laboriosam deserunt beatae?</div>
</div>
<div class="cta-btn">TAKE A LOOK</div>
</div>
</a>
<a href="" class="">
<div class="grid-item">
<div class="image object-fit-container">
<img src="./img/pic.jpg" alt="">
</div>
<div class="label">
<div class="client">Text</div>
<div class="project"> expedita excepturi sit consequuntur laboriosam deserunt
beatae?</div>
</div>
</div>
</a>
<a href="" class="">
<div class="grid-item">
<div class="image object-fit-container">
<img src="./img/pic.jpg" alt="">
</div>
<div class="label">
<div class="client">Text</div>
<div class="project"> expedita excepturi sit consequuntur laboriosam deserunt
beatae?</div>
</div>
</div>
</a>
<a href="" class="">
<div class="grid-item">
<div class="image object-fit-container">
<img src="./img/pic.jpg" alt="">
</div>
<div class="label">
<div class="client">Text</div>
<div class="project"> expedita excepturi sit consequuntur laboriosam deserunt
beatae?</div>
</div>
</div>
</a>
<a href="" class="">
<div class="grid-item banner-btn">
<div class="bannercontent">
See more our work
</div>
</div>
</a>
</div>
</div>
Код:
.wrapper {
max-width: 1440px;
}
.content {
margin: 100px auto;
max-width: 720px;
padding: 0;
}
.object-fit-container {
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
}
.grid-item .image {
width: 100%;
height: 100%;
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.special-grid-item {
position: relative;
display: block;
overflow: hidden;
grid-column-end: span 2;
grid-row-end: span 2;
}
.special-grid-item .grid-item {
height: 600px;
}
.grid-items {
display: grid;
padding: 0;
grid-gap: 5px;
margin: 0 auto 18px;
grid-template-columns: 25% 25% 25% 25%;
}
.grid-item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
align-items:flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
overflow: hidden;
height: 300px;
background-color: #000;
}