본문 바로가기
CSS

레이아웃 - grid 유형

by dongjin6539 2023. 3. 1.
728x90
반응형

레이아웃 - grid 유형

grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이아웃을 먼저 스케치하고 그것을 위해 필요한 속성을 추가는 방식입니다.

 

이제 flex유형을 사용해서 예시를 만들어 보겠습니다.

1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃 - grid 유형</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #E1F5FE;
        }
        #wrap {
            width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-areas: 
                "header header"
                "nav nav"
                "aside article1"
                "aside article2"
                "aside article3"
                "footer footer"
            ;
            grid-template-columns: 300px 900px;
            grid-template-rows: 100px 100px 260px 260px 260px 100px;
        }
        #header {
            background-color: #B3E5FC;
            grid-area: header;
        }
        #nav {
            background-color: #81D4FA;
            grid-area: nav;
        }
        #aside {
            background-color: #4FC3F7;
            grid-area: aside;
        }
        #article1 {
            background-color: #29B6F6;
            grid-area: article1;
        }
        #article2 {
            background-color: #03A9F4;
            grid-area: article2;
        }
        #article3 {
            background-color: #039BE5;
            grid-area: article3;
        }
        #footer {
            background-color: #0288D1;
            grid-area: footer;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header"></header>
        <nav id="nav"></nav>
        <aside id="aside"></aside>
        <article id="article1"></article>
        <article id="article2"></article>
        <article id="article3"></article>
        <footer id="footer"></footer>
    </div>
</body>
</html>

작성 방법

  • 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다.
  • grid 유형은 각 구역마다 주어야하기 때문에 모든 구역을 나눕니다.
  • 테이블(표)처럼 가로, 세로가 몇 칸인지 확인 후 구역을 나누어줍니다.
  • header 구역, nav 구역, aisde 구역, article1 구역, article2 구역, article3 구역, footer 구역을 만들어줍니다. 
  • head 태그에 style 태그를 입력해줍니다.
  • 구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0;을 줍니다.
  • 해당하는 구역에 배경색, grid-area: ; 속성을 줄 수 있도록 태그를 만들어 줍니다. 
  • 각 영역에 알맞는 배경색, grid-area: ; 속성 안에 이름을 입력해줍니다.
  • wrap 구역이 가운데 정령이 될 수 있도록 margin: 0 auto;를 입력해줍니다.
  • wrap 구역에 grid 속성을 주기 위해 display: grid;를 입력해줍니다.
  • 가로, 세로 몇 칸인지 확인 한 후 grid-template-areas: " "; 속성을 사용해서 grid-area: ; 속성 안에 준 이름을 사용해서 가로, 세로를 나열해줍니다.
  • 다음  grid-template-colums: ; 속성과 grid-template-rows: ; 속성을 사용해서 가로와 세로의 크기를 입력해줍니다.

 

그러면 아래와 같은 레이아웃이 나옵니다!!!

참고

grid-template-columns 속성
  • grid-template-columns 속성은 가로의 크기를 지정해주는 속성입니다.
grid-template-rows 속성
  • grid-template-rows 속성은 세로의 크기를 지정해주는 속성입니다.

참고 홈페이지

https://dongjin6539.github.io/web2023/layout/index.html

 

728x90
반응형