반응형 display : grid 소스
본문
html
<section class="default-padding">
<div class="container">
<div class="">
<div class="cards1">
<div class="card1">ONE</div>
<div class="card1">TWO</div>
<div class="card1">THREE</div>
<div class="card1">FOUR</div>
<div class="card1">FIVE</div>
<div class="card1">SIX</div>
</div>
</div>
</div>
</section>
style.css
.card1 {
background-color: #e5e3e3;
color: #222;
padding: .5rem;
height: 10rem;
}
.cards1 {
max-width: ;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
/* Screen larger than 600px? 2 column */
@media (min-width: 480px) {
.cards1 { grid-template-columns: repeat(1, 1fr); } /* repeat(3, minmax(50px, )); */
}
@media (min-width: 640px) {
.cards1 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.cards1 { grid-template-columns: repeat(2, 1fr); }
}
/* Screen larger than 900px? 3 columns */
@media (min-width: 993px) {
.cards1 { grid-template-columns: repeat(3, 1fr); }
}
댓글목록
등록된 댓글이 없습니다.