-
Зависит от того, с помощью чего верстаете. Нет единого ответа на ваш вопрос, их много может быть. Если спрашиваете как это верстать - идите смотрите уроки – InDevX 6 апр '19 в 10:12
-
Чем этот блок отличается от других? 2 строки по 3 колонки! Или Вы хотите чтобы за Вас все сделали?! Приведите код что Вы уже сделали и что не получилось! – HamSter 6 апр '19 в 10:22
2 ответа
Как вариант, используя grid верстку(flex,table..), но судя по всему вам необходимо в целом почитать материал по css. Вот вам как пример:
h1 {
text-align: center;
}
.container {
display: grid;
grid-gap: 20px;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
justify-content: space-evenly;
}
.container div {
background-color: gold;
text-align: center;
}
<h1>Example</h1>
<div class='container'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Решение на flex. Откорректируй стили так, как тебе нужно.
.flex-container {
display: flex;
flex-wrap: wrap;
padding: 0 0.5%;
}
.flex-item {
width: 33%;
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
.flex-item img {
width: 50%;
height: auto;
padding: 10px;
box-sizing: border-box;
}
.flex-item h2 {
margin: 5px 0;
}
.flex-item p {
margin: 5px 0;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main h1 {
margin: 5px 0;
}
.main p {
margin: 5px 0;
}
.chertocka {
height: 2px;
width: 40px;
background-color: gray;
}
<div class="main">
<h1>Название</h1>
<p>Описание</p>
<div class="chertocka"></div>
<ul class="flex-container">
<li class="flex-item">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" alt="Описание рисунка если надо, если нет, оставляешь пустым">
<h2>Название</h2>
<p>Описание</p>
</li>
<li class="flex-item">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" alt="Описание рисунка если надо, если нет, оставляешь пустым">
<h2>Название</h2>
<p>Описание</p>
</li>
<li class="flex-item">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" alt="Описание рисунка если надо, если нет, оставляешь пустым">
<h2>Название</h2>
<p>Описание</p>
</li>
<li class="flex-item">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" alt="Описание рисунка если надо, если нет, оставляешь пустым">
<h2>Название</h2>
<p>Описание</p>
</li>
<li class="flex-item">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" alt="Описание рисунка если надо, если нет, оставляешь пустым">
<h2>Название</h2>
<p>Описание</p>
</li>
<li class="flex-item">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" alt="Описание рисунка если надо, если нет, оставляешь пустым">
<h2>Название</h2>
<p>Описание</p>
</li>
</ul>
</div>