CSS에서 반응형 그리드 만들기

사용자를 끌어들이기 위해 여러 그리드를 표시하려면 웹사이트용 CSS에서 반응형 그리드를 만드는 방법이 필수적입니다. 반응형 그리드 요소를 만들려고 하시나요?

아시다시피 하나의 크기로 모든 화면 크기를 조정할 수는 없습니다. 이제 현재 솔루션은 화면에 보기를 포함하여 화면 크기에 따라 수정되는 반응형 그리드입니다. 개발자는 반응형 그리드 요구 사항을 위한 웹사이트 프레임워크를 설계하기 시작합니다. 하지만 직접 코딩하는 것은 생각만큼 어렵지 않을 수 있습니다.

CSS에서 반응형 그리드를 만드는 방법.

이제 반응형 그리드를 만드는 데 도움이 되는 몇 줄의 HTML 코드를 작성해 보겠습니다.

<div class="grids">
  <div class="grid">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
  <div class="grid">9</div>
</div>

CSS 코드:

html { 
font-size: 22px; 
}
body {
 padding: 1rem;
 }

.grid {
  background-color: blue;
  color: white;
  padding: 1rem;
  height: 4rem;
  font-size:50px;
}

.grids {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .grids { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .grids { grid-template-columns: repeat(3, 1fr); }
}

글쎄, 당신은 이제 그리드가 어떻게 보이는지 확인할 시간을 모두 마쳤습니다. .html 확장자로 파일을 저장하고 이 파일을 웹 브라우저에 열면 결과를 볼 수 있습니다.

자세히 보기: Create A Responsive Grid In CSS