Помогите разобраться как мне сверстать данный макет с помощью grid так что бы она была адаптивна..
Да еще я не понял структуру, посмотрите на мою структуру.. то есть сначала сделал блок(wrapper) по центру( с помощью margin: 0 auto не получилась) или как правильно вы посоветуйте..?
Вот этот макет.
<body>
<section class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
<div class="container">6</div>
</section>
</body>
И css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 600px; /*Может задать в % тах?*/
}
.wrapper {
display: grid;
height: 400px;
grid-template-columns: repeat(3, 1fr); /*1fr 1fr 1fr or 200px 200px 200px*/
text-align: center;
justify-content: center;
background: #dedede;
border: 1px solid red;
}
.container {
padding: 50px;
border: 1px solid black;
}
Простой
Средний
