[HTML/CSS] 11. Grid Layout 실습

최재원

Mar 11, 2025

Contents

1. 예제 코드 결과 2. 예제 코드 결과

1.

images.zip

3104.0KB

❗

다음과 같이 만들어 보세요

예제

코드


<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ex01-styles.css" />
    <title>실습 그리드 레이아웃 css 1</title>
  </head>
  <body>
    <div class="page-container">
      <div class="content-wrapper">
        <div class="guidebooks-section-1">
          <div class="section-header">
            <div class="section-title">
              <h2>Meet Guidebooks</h2>
            </div>
            <div class="section-description">
              <p>
                Discover hundreds of local spots recommended by Airbnb hosts
              </p>
            </div>
          </div>
          <div class="grid-container">
            <div class="grid">
              <div class="grid-card">
                <img src="ex01-imgs/san-francisco.jpg" />
                <p>San Francisco</p>
              </div>
              <div class="grid-card">
                <img src="ex01-imgs/new-york.jpg" />
                <p>New York</p>
              </div>
              <div class="grid-card">
                <img src="ex01-imgs/london.jpg" />
                <p>London</p>
              </div>
            </div>
          </div>
          <div class="section-footer">
            <div class="button-container">
              <button class="guidebooks-button">See All Guidebooks</button>
            </div>
          </div>
        </div>
        <div class="guidebooks-section-2">
          <div class="section-header">
            <div class="section-title">
              <h2>Meet Guidebooks</h2>
            </div>
            <div class="section-description">
              <p>
                Discover hundreds of local spots recommended by Airbnb hosts
              </p>
            </div>
          </div>
          <div class="grid-container">
            <div class="grid">
              <div class="grid-card">
                <img src="ex01-imgs/napa.jpg" />
                <p>Napa</p>
              </div>
              <div class="grid-card">
                <img src="ex01-imgs/sonoma.jpg" />
                <p>Sonoma</p>
              </div>
              <div class="grid-card">
                <img src="ex01-imgs/san-francisco-2.jpg" />
                <p>San Francisco</p>
              </div>
            </div>
          </div>
          <div class="section-footer">
            <div class="button-container">
              <button class="guidebooks-button">See All Guidebooks</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 2fr 1fr;
}

.content-wrapper {
  grid-column: 2 / 1 span;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  padding-block: 20px;
  background-color: rgb(241, 241, 241);
  padding: 20px;
}

.guidebooks-section-1,
.guidebooks-section-2 {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  gap: 10px;
}

.section-header {
  display: grid;
}

.section-title {
  display: grid;
  justify-items: center;
  align-items: center;
  color: rgb(255, 125, 125);
}

.section-description {
  display: grid;
  justify-content: center;
  align-items: center;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.grid-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
}

.grid-card p {
  position: absolute;
  color: white;
  font-size: 18px;
}

.button-container {
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
}

.guidebooks-button {
  border: 2px solid black;
  border-radius: 5px;
  background-color: rgb(255, 125, 125);
  color: white;
  padding: 10px 20px;
  cursor: pointer;
}

결과

2.

ex2.zip

262.6KB

❗

다음과 같이 만들어 보세요

예제

❗

재료 준비

Emoji

▲❚

font-family

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }

색깔

--colorOne: #d5ecf4; --colorTwo: #e5efd9; --colorThree: #fcf8c0; --colorFour: #ebebeb; --colorFive: #f4c5c3; --colorSix: #e5efd8; --colorSeven: #fcf8c0;

코드


<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ex02-styles.css" />
    <title>실습 그리드 레이아웃 css 2</title>
  </head>
  <body>
    <div class="page-container">
      <div class="content-wrapper">
        <div class="navigation-header">
          <div class="logo-container">
            <div class="logo">▲❚</div>
          </div>
          <div class="menu-container">
            <ul class="menu-group">
              <li class="menu-link">
                <a href="#">INFORMATION</a>
              </li>
              <li class="menu-link">
                <p>About</p>
              </li>
              <li class="menu-link">
                <p>News</p>
              </li>
              <li class="menu-link">
                <p>Press</p>
              </li>
            </ul>
            <ul class="menu-group">
              <li class="menu-link">
                <a href="#">PORTFOLIO</a>
              </li>
              <li class="menu-link">
                <p>Products</p>
              </li>
              <li class="menu-link">
                <p>Graphics</p>
              </li>
              <li class="menu-link">
                <p>Sounds</p>
              </li>
            </ul>
            <ul class="menu-group">
              <li class="menu-link">
                <a href="#">NETWORK</a>
              </li>
              <li class="menu-link">
                <p>Facebook</p>
              </li>
              <li class="menu-link">
                <p>Instagram</p>
              </li>
              <li class="menu-link">
                <p>Youtube</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="grid-container">
          <div class="grid-item-1 bg-blue"></div>
          <div class="grid-item-2">
            <img src="ex02-imgs/1.jpg" />
          </div>
          <div class="grid-item-3 bg-green"></div>
          <div class="grid-item-4">
            <img src="ex02-imgs/2.jpg" />
          </div>
          <div class="grid-item-5 bg-yellow"></div>
          <div class="grid-item-6 bg-gray"></div>
          <div class="grid-item-7">
            <img src="ex02-imgs/3.jpg" />
          </div>
          <div class="grid-item-8 bg-red"></div>
          <div class="grid-item-9">
            <img src="ex02-imgs/4.jpg" />
          </div>
          <div class="grid-item-10">
            <img src="ex02-imgs/5.jpg" />
          </div>
          <div class="grid-item-11">
            <img src="ex02-imgs/6.jpg" />
          </div>
          <div class="grid-item-12">
            <img src="ex02-imgs/7.jpg" />
          </div>
          <div class="grid-item-13 bg-green"></div>
          <div class="grid-item-14">
            <img src="ex02-imgs/8.jpg" />
          </div>
          <div class="grid-item-15 bg-yellow"></div>
        </div>
      </div>
    </div>
  </body>
</html>


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body {
  --colorOne: #d5ecf4;
  --colorTwo: #e5efd9;
  --colorThree: #fcf8c0;
  --colorFour: #ebebeb;
  --colorFive: #f4c5c3;
  --colorSix: #e5efd8;
  --colorSeven: #fcf8c0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.page-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.content-wrapper {
  grid-column: 2 / 1 span;
  display: grid;
  gap: 100px;
  padding-block: 30px;
}

.navigation-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.logo-container .logo {
  font-size: 50px;
}

.menu-container {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
}

.menu-group {
  display: grid;
  gap: 10px;
}

.menu-group a {
  color: gray;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 15px;
  justify-content: center;
}

.bg-blue {
  background-color: #d5ecf4;
}

.bg-green {
  background-color: #e5efd9;
}

.bg-yellow {
  background-color: #fcf8c0;
}

.bg-gray {
  background-color: #ebebeb;
}

.bg-red {
  background-color: #f4c5c3;
}

.grid-item-1 {
  grid-row: 1 / 2 span;
  grid-column: 1 / 1 span;
}

.grid-item-2 {
  grid-column: 2 / 2 span;
  grid-row: 1 / 2 span;
}

.grid-item-3 {
  grid-column: 1 / 1 span;
  grid-row: 3 / 1 span;
}

.grid-item-4 {
  grid-column: 2 / 1 span;
  grid-row: 3 / 2 span;
}

.grid-item-5 {
  grid-column: 3 / 1 span;
  grid-row: 3 / 1 span;
}

.grid-item-6 {
  grid-column: 1 / 1 span;
  grid-row: 4 / 1 span;
}

.grid-item-7 {
  grid-column: 3 / 1 span;
  grid-row: 4 / 1 span;
}

.grid-item-8 {
  grid-column: 1 / 2 span;
  grid-row: 5 / 2 span;
}

.grid-item-9 {
  grid-column: 3 / 1 span;
  grid-row: 5 / 2 span;
}

.grid-item-10 {
  grid-column: 1 / 2 span;
  grid-row: 7 / 2 span;
}

.grid-item-11 {
  grid-column: 3 / 1 span;
  grid-row: 7 / 1 span;
}

.grid-item-12 {
  grid-column: 3 / 1 span;
  grid-row: 8 / 1 span;
}

.grid-item-13 {
  grid-column: 1 / 2 span;
  grid-row: 9 / 2 span;
}

.grid-item-14 {
  grid-column: 3 / 1 span;
  grid-row: 9 / 1 span;
}

.grid-item-15 {
  grid-column: 3 / 1 span;
  grid-row: 10 / 1 span;
}

[HTML/CSS] 11. Grid Layout 실습

1.

예제

코드

결과

2.

예제

코드

결과

More articles

[HTML/CSS] 13. 전체 실습 예제

[HTML/CSS] 12. Card 박스 만들기

[HTML/CSS] 10. Img 와 Icon

[HTML/CSS] 9. CSS Position