Здравствуйте уважаемые пользователи.
Недавно начал знакомиться с GRID и что- пошло не так.
Когда пытаюсь добавить два блока сверху, то начинают крушиться остальные.
Два блока сверху нужно чтоб выглядели так
блок1|блок1 |блок1|блок 2
<div class="wrapper">
<div class="statone holder"><p> test</p>
<div class="block"><p>Тест тест</p></div>
</div>
<div class="stattwo holder"><p title="Этот текст будет показан при наведении">Просто текст</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthree holder">3<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statoneb holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="stattwob holder">2<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreeb holder">3<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreeb holder">3<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<!-- третья колонка -->
<div class="statonec holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreec holder"><br><h1>Заголовк</h1></p>
<div class="block"><p>Тест тест</p></div>
</div>
<!-- 4я колонка из 4 -->
<div class="statone holder"><p> test</p>
<div class="block"><p>Тест тест</p></div>
</div>
<div class="stattwo holder"><p>Просто текст</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statone4row holder"><p> test</p>
<div class="block"><p>Тест тест</p></div>
</div>
<div class="stattwo4row holder"><p>Просто текст</p>
<div class="block"><p>Тест тест</p></div></div>
<!-- dva bloka -->
<div class="statonec holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreec holder"><br><h1>Заголовк</h1></p>
<div class="block"><p>Тест тест</p></div>
</div>
<!-- dva bannera-->
<div class="banner holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="banner2 holder"><br><h1>Заголовк</h1></p>
<div class="block"><p>Тест тест</p></div>
</div>
<!-- botto -->
<div class="bottom holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
</div>
p{
text-align: center;
margin: auto;
padding-top: 12%;
color: white;
text-shadow: grey;
}
h1{
vertical-align: bottom;
text-align: center;
padding-right: 20px;
color: white;
}
.statone {
background: green;
}
.stattwo {
background: yellow;
}
.statthree {
background: grey;
}
.statoneb {
background: red;
}
.stattwob {
background: yellow;
}
.statthreeb {
background: grey;
}
.statonec {
background: red;
height: 200px;
}
.stattwoc {
background: yellow;
height: 200px;
}
.statthreec {
background: grey;
height: 200px;
}
.wrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 200px 200px 200px;
grid-column-gap: 10px;
grid-row-gap: 10px;
max-width: 1370px;
width: 90%;
margin: auto;
}
.bannerr {
grid-column-start: 1;
grid-column-end: 4;
height: 120px;
background: blue;
}
.bannerr2 {
grid-column-start: 4;
grid-column-end: 5;
height: 120px;
background: green;
}
.statone {
grid-column-start: 1;
grid-column-end: 2;
}
.stattwo {
grid-column-start: 2;
grid-column-end: 3;
}
.statthree {
grid-column-start: 3;
grid-column-end: 5;
}
.statoneb {
grid-row-start: 2;
grid-row-end: 4;
}
.stattwob {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
}
.statthreeb {
grid-column-start: 4;
grid-column-end: 5;
}
.statonec {
grid-column-start: 1;
grid-column-end: 3;
}
.statthreec {
grid-column-start: 3;
grid-column-end: 5;
}
.statone4row{
grid-column-start: 3;
grid-column-end: 4;
height: 200px;
background: palegreen;
}
.stattwo4row{
grid-column-start: 4;
grid-column-end: 5;
height: 200px;
background: rebeccapurple;
}
.banner {
grid-column-start: 1;
grid-column-end: 3;
height: 120px;
background: blue;
}
.banner2 {
grid-column-start: 3;
grid-column-end: 5;
height: 120px;
background: green;
}
.bottom {
grid-column-start:1;
grid-column-end: 5;
height: 400px;
background: green;
}
для блоков сверху пытался встроить так:
<div class="bannerr holder" id="ads"><a href="#"><h3> Реклама </h3></a>
<div class="block"><p>Тест тест</p></div></div>
<div class="bannerr2"><a href="#"><h3> Реклама </h3></a>
<div class="block"><p>Тест тест</p></div>
</div>