CSS Grid Layout을 사용해보기

16108 단어 HTMLCSS3IE11gridlayout
CSS Grid Layout 라는 존재를 깨달았으므로 메모로 남긴다.
flexbox는 알고 있었습니다만.

CSS GridLayout이란?



웹 페이지 레이아웃의 새로운? 쓰기 방법.
그건 그렇고, 나는 지금도 가끔 테이블에 배치합니다.

flexbox라고 하는 레이아웃 방법도 있지만 페이지 전체의 레이아웃은 Grid Layout 쪽이 하기 쉽다고 생각했다.
flexbox는 1차원으로 레이아웃(콘텐츠를 옆에 늘어놓거나 세로로 늘어놓거나) 하는 경우에는 좋다고 어딘가에 써 있었다.

코드와 완성도



빨리 코드 (HTML) 제시

index4.html
<head>
    <title>grid test</title>
    <link rel="stylesheet" href="style4.css" />
</head>

<body>

<div id="Grid">
    <header>
        <img src="image/sampleimg.jpg" style="width:100px;height:100px;"/>
    </header>
    <left>left</left>
    <main>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
        <div>aaaaaaaaa</div>
    </main>
    <right>right</right>
    <footer>bottom</footer>
</div>

</body>

다음 스타일 시트(css)

style4.css
header, left, main, right, footer {
  display: block;
}

body {
    background-image: url("image/bg_br.jpg");
}

#Grid {
    display: grid;
    grid-template:
        "header header header" auto
        "left main right" auto
        "footer footer footer" auto /
        2fr 6fr 2fr;
    grid-gap: 5px;
}

#Grid header {
  grid-area: header;
}

#Grid main {
  grid-area: main;
  border: red solid 1px;
}

#Grid left {
  grid-area: left;
}

#Grid right {
  grid-area: right;
}

#Grid footer {
  grid-area: footer;
}

#Grid > * {
  background-color: rgba(255,255,255,0.5);

  padding: 1rem;
}

그리고 완성된 화면의 이미지



해설



우선 div 요소를 준비하고 스타일시트에서 "display: grid;"로 한다. 이 요소를 컨테이너라고합니다.
컨테이너의 자식 요소( <header></header> 또는 <main></main> 등)에 스타일시트에서 grid-area를 정의합니다.

예
#Grid header {
  grid-area: header;
}

grid-area: header로 하고 있지만, 이 header의 부분은 일의이면 무엇이든 좋다. 이것은 나중에 나오는 grid-template에서 지정할 때 사용하는 명칭.

컨테이너 스타일 시트로 돌아갑니다.
#Grid {
    display: grid;
    grid-template:
        "header header header" auto
        "left main right" auto
        "footer footer footer" auto /
        2fr 6fr 2fr;
    grid-gap: 5px;
}

앞에서도 쓴 대로 코코의 grid-template에 grid-area로 기재한 이름(header 등)을 사용한다.

"header header header"와 같은 것이 3회 걸리고 있지만 이것은 3열을 의미한다. <header></header> 의 내용이 3열분 결합되어 표시된다.
다음에 "left main right"라고 쓰여져 있지만, <left></left> 가 왼쪽의 열, <main></main> 가 중간의 열, <right></right> 가 오른쪽의 열에 표시되는 것을 의미한다.
완성 이미지에서는 <main> 에 aaaaaaa를 가득 써 두었으므로 봐 주시면 알기 쉬울 것이다.
auto는 행의 너비를 나타냅니다. px나 em등에서도 쓸 수 있다. aaaaaaa를 가득 썼지만 auto이므로 쓴 만큼 아래로 뻗는다.
/의 뒤는 각 열의 폭을 나타내는 2fr 6fr 2fr로 하고 있지만 1열째는 전체의 2할, 2열째는 전체의 6할, 3열째는 전체의 2할이라고 하는 의미. 열 수와 일치합니다.

grid-template 이외의 쓰는 방법도 있지만, 앞으로 쓰는 이유에 따라 grid-template로 기재하는 것을 추천한다. 이렇게 IE11 대응이다.

IE11에서의 표시





엉망이되어 힘들다.
구그하면 나오는 것이 Autoprefixer의 존재다.
그러나 사용법이 일향으로 모른다. 하지만 쉬웠다.

아래의 사이트에 번역 사이트와 같이 스타일 시트를 돌진하면 좋을 뿐.
htps : // 어쩌면 p레후 r. 기주 b. 이오/

변환 후 스타일시트

style4a.css
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */


header, left, main,right, footer {
  display: block;
}

body {
    background-image: url("image/bg_br.jpg");
}

#Grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 5px auto 5px auto;
    -ms-grid-columns: 2fr 5px 6fr 5px 2fr;
        grid-template:
        "header header header" auto
        "left main right" auto
        "footer footer footer" auto /
        2fr 6fr 2fr;
    grid-gap: 5px;
}

#Grid header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: header;
}

#Grid main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: main;
  border: red solid 1px;
}

#Grid left {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: left;
}

#Grid right {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
  grid-area: right;
}

#Grid footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: footer;
}

#Grid > * {
  background-color: rgba(255,255,255,0.5);

  padding: 1rem;
}



좋은 느낌이 들었다.

좋은 느낌이 들지 않으면



원인 1
스타일 시트의 선두에 기술하고 있는 하기의 정의가 필요.
header, left, main, right, footer {
  display: block;
}

IE11 이외라고 쓰지 않아도 깨끗하게 레이아웃되어 버리기 때문에 빠졌다.
block 요소일 필요가 있는 것 같다. 솔직하게 전부 div로 만들어 두면 문제 없을지도 모른다.

원인 그 2
grid-template-columns와 grid-template-rows를 사용한 쓰기를 하고 있다.
이번에 기재한 grid-template을 사용한 쓰는 방법 이외에는 Autoprefixer가 대응하고 있지 않다. grid-template-columns와 grid-template-rows를 사용한 쓰기는 IE11에서 표시할 수 있도록 변환되지 않는다.

사이고에게



기법도 기억해 버리면 편하고, 표시도 빠르기 때문에 앞으로의 레이아웃은 Grid Layout를 사용해 가고 싶다. 이것으로 Table 레이아웃과도 헤어질 수 있을 것 같다. 기존의 것도 재작성하고 싶다.
【비망록:HTML/CSS】data 속성은 CSS 설계로 소중하네요?
스크롤을 따르는 여러 헤더를 만드는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage