티스토리 뷰

Html,Css/Css

css :Grid Rows and Columns

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 18. 14:28 
<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div class="header"></div>
      <div class="content"></div>
      <div class="nav"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: repeat(4, 200px);
  gap: 10px;
}

.header {
  background-color: aqua;
  grid-column-start: 1;
  grid-column-end: 5;
}

.content {
  background-color: brown;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

.nav {
  background-color: chocolate;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
}

.footer {
  background-color: darkgreen;
  grid-column-start: 1;
  grid-column-end: 5;
}

 

 

이와 같은 명령어로 단축어를 사용할 수 있다.

 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: repeat(4, 200px);
  gap: 10px;
}

.header {
  background-color: aqua;
  grid-column: span 4; /* 1 / -1 과 같음 ; */
}

.content {
  background-color: brown;
  grid-column: 1 / -2;
  grid-row: 2 / -2;
}

.nav {
  background-color: chocolate;
  grid-column: 4 / -1;
  grid-row: 2 / -2;
}

.footer {
  background-color: darkgreen;
  grid-column: span 4; /* 1 / -1 과 같음 ; */
}

 

SPAN 과 1/ -1 등의 단축어가 가능하다

 

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

 

'Html,Css > Css' 카테고리의 다른 글

css: grid minmax()  (0) 2021.10.18
css : grid-template  (0) 2021.10.18
css : Grid Template Areas  (0) 2021.10.15
CSS) 검색창에 아이콘, 이모티콘 넣기  (0) 2021.05.27
css)overflow 에서 scroll 스크롤바 숨기기 없애기 방법 (스크롤 동작)  (0) 2021.05.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함