Chia cột bằng thuộc tính display grid trong CSS

<div class="box">
<div>Nội dung 1</div>
<div>Nội dung 2</div>
<div>Nội dung 3</div>
<div>Nội dung 4</div>
<div>Nội dung 5</div>
<div>Nội dung 6</div>
</div>


<style>
.box{
	display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* chia làm 4 cột */
    grid-column-gap: 20px; /* khoảng cách giữa các cột */
    grid-row-gap: 20px; /* khoảng cách giữa các hàng cột */
}
/* size màn hình dưới 700px sẽ về 2 cột */
@media (max-width: 700px) {
.box{grid-template-columns: 1fr 1fr;} /* thành 2 cột */
}
/* size màn hình dưới 300px sẽ về 1 cột */
@media (max-width: 300px) {
.box{grid-template-columns: 1fr;} /* thành 1 cột */
}
.box div{
	padding:10px;
    border:2px solid #999;
}
</style>
READ  [Lập trình Web] Bài 1 - Khái quát về Ngôn ngữ HTML (giaosumaytinh.com)

Trả lời

error: Nội dung đã được bảo vệ !!
Contact Me on Zalo
Welcome to giaosumaytinh.com - Chấp nhận cookie