[SeSAC Front-end] CSS Grid로 반응형 Layout 만들기

Harimad·2022년 11월 15일
0

css

목록 보기
6/6
post-thumbnail

Intro

  • 브라우저 사이즈에 따라서 반응형으로 웹 페이지 레이아웃이 변경되도록 하는것이 이번 장의 목표입니다.
  • flex를 이용하는 방법으로도 레이아웃을 만들 수 있지만, 이번에는 Grid를 이용해보겠습니다.
  • Live Demo 👈 우리가 작업할 레이아웃을 미리 확인할 수 있습니다.
  • 너비가 1024px 이상일 떄는 아래와 같은 레이아웃이 되도록 해야합니다.

  • 너비가 768px 이상일 때는 다음과 같아야합니다.

  • 너비가 768px 이하 일때는 아래와 같아야 합니다.


HTML

  • 그리드 레이아웃을 구성

    • 768px 이하 일 때는 1개씩
    • 768px 이상 일 때는 첫 번째 줄에 1개, 두 번째 줄부터 2개씩
    • 1024px 이상 일 때는 첫 번째 줄에 2개, 두 번째 줄부터 4개씩 card 컨테이너가 등장합니다.
  • 배경 이미지는 image 클래스에 미리 들어가 있습니다.

<div class="container">
  <div class="menu-1">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://media.istockphoto.com/photos/fried-egg-with-bacon-in-a-white-plate-with-fried-pieces-of-bread-picture-id1079584712?k=20&m=1079584712&s=170667a&w=0&h=JuK4Je9_SHk3jZXYeifSVRvutE3CKih-_iRfH8T0Kb4=)">
      </div>
      <article>
        <h1>아메리카 브런치 세트</h1>
        <p>정성스럽게 구운 팬케익과 프렌치 토스트에 각종 사이드 디쉬, 그리고 샐러드를 곁들인 푸짐한 정통 미국식 브런치</p>
        <span>16,500원</span>
      </article>
    </a>
  </div>
  <div class="menu-2">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1596649299486-4cdea56fd59d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGJ1cmdlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60)">
      </div>
      <article>
        <h1>트리플 머쉬룸 더블 버거</h1>
        <p>육즙 가득한 수제 버거패티와 트러플로 만든 특제 소스로 즐기는 프리미엄 더블 치즈 버거</p>
        <span>16,500원</span>
      </article>
    </a>
  </div>
  <div class="menu-3">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80);"></div>
      <article>
        <h1>로스티드 립&토마토</h1>
        <p>
          특제 허니갈릭 페스토를 얹어 통마늘과 함께 구워낸 취향저격 립
          스테이크
        </p>
        <span>31,000원</span>
      </article>
    </a>
  </div>
  <div class="menu-4">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1540420773420-3366772f4999?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c2FsYWR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60);"></div>
      <article>
        <h1>리코타 치즈 샐러드</h1>
        <p>매장에서 직접 끓여서 만든 수제 리코타치즈와 제철 과일 그리고 호밀빵</p>
        <span>Kezz Bracey</span>
      </article>
    </a>
  </div>
  <div class="menu-5">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1593253500499-50e579a5733f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA1fHxwYXN0YXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60);"></div>
      <article>
        <h1>명란 오일 파스타</h1>
        <p>각종 해산물과 마늘 그리고 신선한 명란알을 넣은 시그니처 오일 파스타</p>
        <span>14,500원</span>
      </article>
    </a>
  </div>
  <div class="menu-6">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1587116861219-230ac19df971?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjh8fG1lYWx8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60);"></div>
      <article>
        <h1>스트립 관자</h1>
        <p>관자살의 부드러운 식감을 느낄 수 있는 샐러드</p>
        <span>17,500원</span>
      </article>
    </a>
  </div>
  <div class="menu-7">
    <a href="#" class="card">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1562022791-b74585b094d8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTEyfHxkZXNzZXJ0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);"></div>
      <article>
        <h1>딸기 케이크</h1>
        <p>진한 우유 생크림과 딸기가 조화를 이룬 케이크</p>
        <span>26,000원</span>
      </article>
    </a>
  </div>
</div>

CSS 1 - grid-template

  • container 클래스에 grid-template 속성을 이용해서 레이아웃을 구성합니다.

  • 브라우저 너비가 768px 이하 일때는 container 클래스의 grid-template-columns를 1fr 하나만 줍니다.

  • 즉 컬럼을 1개만 생성한다는 의미입니다.

  • 768px 이상 일 때는 컬럼을 2개 생성합니다.

  • 그리고 첫 번째 card인 menu-1 클래스에 grid-column을 직접 할당 함으로써 1줄을 다 차지하도록 합니다.

  • 1024px 이상 일 떄는 컬럼을 4개 생성합니다.

  • 첫 번째와 두 번째 card인 menu-1과 menu-2 클래스에 공평하게 grid-column 값을 할당 함으로써 1줄에 2개의 card를 구성합니다.

    html {
  background: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  padding: 20px 0;
}

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

a {
  text-decoration: none;
  color: #555;
}

.container {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

@media screen and (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }

  .menu-1 {
    grid-column: 1 / 3;
  }

  .menu-1 h1 {
    font-size: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }

  .menu-1 {
    grid-column: 1 / 3;
  }

  .menu-2 {
    grid-column: 3 / 5;
  }
}

.card {
  min-height: 100%;
  background: #EEE;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  transition: all 0.2s ease-in-out;
}

.card:hover {
  top: -3px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.card article {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  background-color: white;
}

.image {
  padding-bottom: 50%;
  background-size: cover;
  background-position: center center;
}

.card p {
  flex: 1;
  line-height: 1.4;
}

h1 {
  font-size: 1.5rem;
  color: #444;
}

.card span {
  font-size: 0.8rem;
  font-weight: bold;
  color: #AAA;
  margin: 2rem 0 0 0;
}

CSS 2 - grid-template-area

  • container 클래스에 grid-template-area를 할당하고, menu-1~menu-7 클래스에 grid-area를 할당하는 방법도 살펴보겠습니다.
  • 나머지 style은 위의 css와 동일합니다.
.container {
  grid-template-areas:
    "menu1 menu1 menu2 menu2"
    "menu3 menu4 menu5 menu6"
    "menu7 . . .";
}

@media screen and (max-width: 1024px) {
  .container {
    grid-template-areas:
      "menu1 menu1"
      "menu2 menu3"
      "menu4 menu5"
      "menu6 menu7";
  }
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-areas:
      "menu1"
      "menu2"
      "menu3"
      "menu4"
      "menu5"
      "menu6"
      "menu7";
  }
}

.menu-1 {
  grid-area: menu1;
}
.menu-2 {
  grid-area: menu2;
}
.menu-3 {
  grid-area: menu3;
}
.menu-4 {
  grid-area: menu4;
}
.menu-5 {
  grid-area: menu5;
}
.menu-6 {
  grid-area: menu6;
}
.menu-7 {
  grid-area: menu7;
}

나가면서

  • 지금까지 Grid를 사용해서 반응형 페이지 레이아웃을 구성해 보았습니다.
  • card를 감싸는 container 태그에 grid-template속성을 주는 방식과 grid-template-area속성을 주는 방식이 있습니다.
  • 둘 중에 아무거나 사용해도 상관없습니다.
  • Grid를 사용하면 웹 페이지 레이아웃을 구성하는 작업이 간편해진다는 것을 알게되었습니다.

참고


'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 5주차 블로그 포스팅'
profile
Here and Now. 🧗‍♂️

0개의 댓글