HTML div 3단 분할 모바일 1단 반응형 여백

1 개요

HTML div 3단 분할 모바일 1단 반응형 여백

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 10px;
}
@media (max-width: 600px) {
  .container { display: block; }
}
.box1 { background: red; }
.box2 { background: orange; }
.box3 { background: yellow; }
</style>
<div class='container'>
    <div class='box1'>왼쪽</div>
    <div class='box2'>가운데</div>
    <div class='box3'>오른쪽</div>
</div>

2 같이 보기