Впервые в CSS Grid, и я пытаюсь выяснить некоторые вещи макета.У меня есть 4 "новостных" дива, каждый с некоторым текстом.По сути, я хочу, чтобы первый div был кругом, а затем оставшиеся 3 div были расположены за первым div и торчали справа.
В моем коде ниже я выполнил это, но он растягиваетсявне сетки, и в конечном итоге Div.Если вы удалите код в .news2-4 с комментарием над ним, вы увидите, что сетка возвращается в нормальное состояние.Что здесь происходит, и почему сетка не сохраняет свою форму, когда эти стили применяются к .news2-4?
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.news {
grid-column-start: 1;
grid-column-end: 13;
grid-auto-rows: 200px;
display: grid;
}
.news1 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 4;
background: beige;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
}
.news2 {
grid-column-start: 5;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 3;
background: purple;
position: relative;
z-index: -1;
/*Would like the div to start and end here*/
grid-column-start: 3;
grid-column-end: 8;
}
.news3 {
grid-column-start: 8;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background: aquamarine;
position: relative;
z-index: -1;
/*Would like the div to start and end here*/
grid-column-start: 3;
grid-column-end: 9;
}
.news4 {
grid-column-start: 7;
grid-column-end: 12;
grid-row-start: 3;
grid-row-end: 4;
background: red;
position: relative;
z-index: -1;
/*Would like the div to start and end here*/
grid-column-start: 3;
grid-column-end: 9;
}
<div class="wrapper">
<section class="news">
<div class="card news1">
This is a test
</div>
<div class="card news2">
This is a test
</div>
<div class="card news3">
This is a test
</div>
<div class="card news4">
This is a test
</div>
</section>
</div>