미디어 CSS가 없는 반응형 CSS 그리드

안녕하세요 여러분, 이 튜토리얼에서는 미디어 CSS가 없는 반응형 CSS 그리드를 만들 것입니다.

먼저 index.html과 style.css라는 두 개의 파일을 만든 다음 이를 위한 코드를 작성해야 합니다.

1 단계



index.html 안에 아래 코드 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Responsive Grid Css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="row-outer">
      <div class="container">
        <div class="grid-wrapper">
          <div class="box">Box</div>
          <div class="box">Box</div>
          <div class="box">Box</div>
          <div class="box">Box</div>
          <div class="box">Box</div>
          <div class="box">Box</div>
          <div class="box">Box</div>
          <div class="box">Box</div>
        </div>
      </div>
    </div>
  </body>
</html>


2 단계



그런 다음 아래 화면에서 제공하는 코드인 style.css에 대한 코드를 추가해야 합니다.

* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
    background: #f1f2f3;
}
.container {
    width: 95%;
    max-width: 1160px;
    margin: auto;
}
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-gap: 20px;
}
.box {
    height: 250px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4b00ff;
}
.row-outer {
    padding: 50px 0;
}


자동 응답 비디오 출력:





자동 응답 Codepen 출력:





Download source code

좋은 웹페이지 즐겨찾기