Code/Fron-End

css grid system 1

하말 ⍺ 2024. 4. 19. 15:29
반응형
 * {
	/* flex 1차원적 배치, wrap을 통해 그리드 느낌으로 할 수 있음 */
	display : flex ; /* 한줄을 차지하는 div 요소들을 가로로 배치가능 */
	flex-direction : column /* 쌓이는 방향을 세로로 바꿔줄수있음 (기본 row) */
}

*{
	display:grid /* 부모에서 그리드의 전체적인 모양과 사이즈를 정함 */
    grid-template-columns : /* 가로 */
    grid-template-rows : /* 세로 */
    grid-template-areas : /*  */
    grid-gap : /* 그리드 간격 */
    grid-column-start :
    grid-column-end :
    grid-row-start :
    grid-row-end :
    grid-area  :
}

 

https://www.youtube.com/watch?v=nxi1EXmPHRs

위 유튜브를 정리해본 것 입니다.

한번에 정리해보다가 아니다 싶어서 스샷찍으며 진행

기본형

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="grid.css" />
    <link rel="stylesheet" href="basic-style.css" />
  </head>
  <body>
    <div class="containter">
      <div class="item color1">Item1</div>
      <div class="item color2">Item2</div>
      <div class="item color3">Item3</div>
      <div class="item color4">Item4</div>
      <div class="item color5">Item5</div>
      <div class="item color1">Item6</div>
      <div class="item color2">Item7</div>
      <div class="item color3">Item8</div>
      <div class="item color4">Item9</div>
      <div class="item color5">Item10</div>
    </div>
  </body>
</html>
* {
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.item {
  display: flex;
  justify-content: center;
  border: 1px solid #181818;
  font-size: 1.2rem;
  font-weight: bold;
}

.color1 {
  background-color: #d7bee2;
}

.color2 {
  background-color: #a9c7d8;
}

.color3 {
  background-color: #c0df9f;
}

.color4 {
  background-color: #f2e5a6;
}

.color5 {
  background-color: #e89d9d;
}

 

1. 부모에서 조절하는 grid 옵션

grid 적용

.containter {
  display: grid;
  /* 가로크기 */
  grid-template-columns: 100px 100px 100px;
  /* 세로크기 */
  grid-template-rows: 100px 200px 100px 100px;
}

 

repeat(반복횟수,크기) 사용

.containter {
  display: grid;
  /* repeat(반복횟수, 크기) */
  grid-template-columns: repeat(5, 100px);
  /* 세로크기 */
  grid-template-rows: 100px 200px repeat(2, 100px);
}

 

fr, auto

.containter {
  display: grid;
  /*  비율 / 사용한 fr의 총합. 여기서는 1fr이 5번반복이므로 1fr = 1/5 */
  grid-template-columns: repeat(5, 1fr);
  /* 세로크기 자동 */
  grid-auto-rows: 150px;
}

 

minmax(최소크기,최대크기)

.containter {
  display: grid;
  /*  비율 / 사용한 fr의 총합. 여기서는 1fr이 5번반복이므로 1fr = 1/5 */
  grid-template-columns: repeat(5, 1fr);
  /* 컨텐츠가 있는 칸은 auto로 조절됨 */
  grid-auto-rows: minmax(150px, auto);
}

 

gap 

.containter {
  display: grid;
  padding: 10px;
  /*  비율 / 사용한 fr의 총합. 여기서는 1fr이 5번반복이므로 1fr = 1/5 */
  grid-template-columns: repeat(5, 1fr);
  /* 컨텐츠가 있는 칸은 auto로 조절됨 */
  grid-auto-rows: minmax(150px, auto);
  /* grid-gap, grid-row-gap, grid-column-gap 에서 앞의 grid-는 이제 없어도 작동 */
  gap: 10px;
  row-gap: 20px;
  column-gap: 40px;
}

 

2. 자식에서 조절하는 grid 옵션

start end span

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="grid.css" />
    <link rel="stylesheet" href="basic-style.css" />
  </head>
  <body>
    <div class="containter">
      <div class="item color1">Item1</div>
      <div class="item item2 color2">Item2</div>
      <div class="item color3">Item3</div>
      <div class="item color4">Item4</div>
      <div class="item color5">Item5</div>
      <div class="item color1">Item6</div>
      <div class="item color2">Item7</div>
      <div class="item color3">Item8</div>
      <div class="item color4">Item9</div>
      <div class="item color5">Item10</div>
    </div>
  </body>
</html>

.containter {
  display: grid;
  padding: 10px;
  /*  비율 / 사용한 fr의 총합. 여기서는 1fr이 5번반복이므로 1fr = 1/5 */
  grid-template-columns: repeat(5, 1fr);
  /* 컨텐츠가 있는 칸은 auto로 조절됨 */
  grid-auto-rows: minmax(150px, auto);
  /* grid-gap, grid-row-gap, grid-column-gap 에서 앞의 grid-는 이제 없어도 작동 */
  gap: 10px;
}

.item2 {
  /* 시작은 맨왼쪽부터 1 혹은 맨오른쪽을 -1로 시작 */
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.containter {
  display: grid;
  padding: 10px;
  /*  비율 / 사용한 fr의 총합. 여기서는 1fr이 5번반복이므로 1fr = 1/5 */
  grid-template-columns: repeat(5, 1fr);
  /* 컨텐츠가 있는 칸은 auto로 조절됨 */
  grid-auto-rows: minmax(150px, auto);
  /* grid-gap, grid-row-gap, grid-column-gap 에서 앞의 grid-는 이제 없어도 작동 */
  gap: 10px;
}

.item2 {
  /*2에서 4까지*/
  grid-column: 2/4;
  /*1에서 2칸*/
  grid-row: 1/ span 2;

}
저작자표시 비영리

'Code > Fron-End' 카테고리의 다른 글

css flex system  (1) 2024.04.19
css grid system 2  (0) 2024.04.19
NetBeans connects sftp, ftp  (0) 2024.03.07
Bootstrap  (1) 2024.01.02
레이어팝업 css 반응형으로 만들기.  (0) 2023.12.28

'Code/Fron-End'의 다른글

  • 현재글css grid system 1

관련글

티스토리툴바