CSS) 그리드 레이아웃

16145 단어 CSSCSS3

준비하는 것



index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Grid Layout</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
            <div class="item-1">1</div>
            <div class="item-2">2</div>
            <div class="item-3">3</div>
            <div class="item-4">4</div>
            <div class="item-5">5</div>
            <div class="item-6">6</div>
            <div class="item-7">7</div>
            <div class="item-8">8</div>
            <div class="item-9">9</div>
        </div>
    </body>
</html>

styles.css
body {
  padding: 0;
  margin: 0;
}
.container {
  background: #eee;
  /* グリッドレイアウト適用 */
  display: grid;
}
.item-1 {
  /* 色の指定 */
  background: hsl(300, 80%, 30%);
}
.item-2 {
  background: hsl(300, 80%, 40%);
}
.item-3 {
  background: hsl(300, 80%, 50%);
}
.item-4 {
  background: hsl(200, 80%, 30%);
}
.item-5 {
  background: hsl(200, 80%, 40%);
}
.item-6 {
  background: hsl(200, 80%, 50%);
}
.item-7 {
  background: hsl(100, 80%, 30%);
}
.item-8 {
  background: hsl(100, 80%, 40%);
}
.item-9 {
  background: hsl(100, 80%, 50%);
}

행과 열 지정



방안 종이 모양에 매스 눈을 배치하기 때문에, 행과 열을 지정 지정한다

styles.css
.container {
  background: #eee;
/* グリッドレイアウト適用 */
  display: grid;
/*1*/
  /*grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;*/
/*2*/
  /*grid-template: 80px 80px 80px / 80px 80px 80px;*/
/*3*/
  grid-template: repeat(3, 80px) / repeat(3,80px);
/*4 ブラウザの幅に合わせて要素並べ替え */
  /*grid-template: repeat(3, 80px) / repeat(auto-fill,80px);*/

1~3은 모두 같은 의미를 나타내므로 어느 것으로 써도 k.
실행 결과


4 실행 결과


이런 식으로 브라우저의 너비에 맞춰 정렬해 준다

크기를 % or 비율로 지정



styles.css
.container {
/*  background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;*/
/* %指定*/
  grid-template-columns: 50% 80px 80px;
/*比率指定*/
  grid-template-columns: 100px 1fr 2fr;

% 지정 실행 결과


비율 지정 실행 결과


그리드끼리 틈을 갖게 한다



styles.css
.container {
/*background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;*/

  /*grid-row-gap: 10px;
  grid-column-gap: 10px;*/
/*まとめて書くと*/
  grid-gap: 10px 10px;
}

실행 결과


그리드 라인으로 요소 배치



styles.css
.container {
  /* background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px; */
}
.item-1 {
  /* background: hsl(300, 80%, 30%); */
  /* 1 */
  grid-row-start: 3;
  grid-row-end: 4;
  /* 2 */
  grid-row: 3 / 4;
  /* 3 */
  grid-row: 3 / span 1;
  /* 4  span1の場合は省略できる*/
  grid-row: 3;

  grid-column: 2 / span 2;
  /* rowとcolumnをまとめると */
  grid-area: 3 / 2 / 4 / 4;
}

1~4는 모두 같은 의미
grid-area: row-start/column-start/row-end/column-end;


지역 등록 및 지정



index.html
<body>
    <div class="container">
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <!-- <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div> -->
    </div>
</body>

styles.css
.container {
  /*background: #eee;
  display: grid;*/
/*1*/
  /*grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;*/
/*2*/
  /*grid-template-areas:
    "header header header"
    "main   main   sidebar"
    "footer footer footer";*/

/*1と2をまとめると*/
  grid-template:
    "header header header" 80px
    "main   main  sidebar" 80px
    "footer footer footer" 80px
    / 80px 80px 80px;
}
.item-1 {
  /* background: hsl(300, 80%, 30%); */
  grid-area: header;
}
.item-2 {
  /* background: hsl(300, 80%, 40%); */
  grid-area: main;
}
.item-3 {
  /* background: hsl(300, 80%, 50%); */
  grid-area: sidebar;
}
.item-4 {
  /* background: hsl(200, 80%, 30%); */
  grid-area: footer;
}

실행 결과
HTML과 CSS만으로 고정 헤더, 각각 스크롤할 수 있는 사이드 메뉴와 메인 컨텐츠를 만들고 싶다
Vue.js에서 OS 및 사이트 내에서 어두운 모드 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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