Узнать, как создавать адаптивные карточки столбцов используя HTML, CSS.
Как создать карточки-колонки
Шаг 1) Добавьте HTML:
<div class="row">
<div class="column">
<div class="card">..</div>
</div>
<div
class="column">
<div class="card">..</div>
</div>
<div
class="column">
<div class="card">..</div>
</div>
<div
class="column">
<div class="card">..</div>
</div>
</div>
Шаг 2) Добавьте CSS:
* {
box-sizing: border-box;
}
body {
font-family:
Arial, Helvetica, sans-serif;
}
/* Расположите четыре колонки рядом */
.column {
float: left;
width: 25%;
padding: 0
10px;
}
/*
Уберите лишние отступы слева и справа из-за padding в колонках */
.row {margin: 0
-5px;}
/* Очистка float после колонок */
.row:after {
content: "";
display: table;
clear: both;
}
/*
Стиль для карточек */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* этот эффект создает "карточку" */
padding: 16px;
text-align: center;
background-color:
#f1f1f1;
}
/* Адаптивные колонки - одна колонка (вертикально) на
маленьких экранах */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
Попробуйте сами »
Совет: Посетите наш учебник по макетам сайтов на CSS, чтобы узнать больше о верстке сайтов.
Совет: Посетите наш учебник по адаптивному веб-дизайну на CSS, чтобы узнать больше об адаптивном дизайне и сетках.