본문 바로가기
카테고리 없음

grid

다용이 2024. 5. 11. 09:59

주축과 교차축에 여러가지 아이템을 나열하도록 해줌.

container가 있고 그 안에 item 나열 

 

 

container-display

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
 </div>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
 </div>

 

.container{
  border: 5px dashed orange;

  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

컨테이너가 틀을 만들어주고 형제관계인 애들이 차례대로 인라인으로 정렬함.

 

 

container- grid-template-rows

container에 사용 

 

container-template-column

 

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
 </div>
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-columns: 100px 150px 100px;
  grid-template-rows: 100px 150px;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

.container{
  border: 5px dashed orange;
  height: 400px;

  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 30px;
}

1fr 1fr 1fr: 1:1:1 (비율을 나타냄)

같은표현으로

  grid-template-rows: repeat(4,1fr);

라고 쓸수 있음

 

container- grid-template-areas

 

<div class="container">
    <div class="item header">
      header
    </div>
    <div class="item main">
      main
    </div>
    <div class="item sidebar">
      sidebar
    </div>
    <div class="item footer">
      footer
    </div>
.container{
  border: 5px dashed orange;
  width:400px;
  height: 400px;

  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows:repeat(3,1fr);
  grid-template-areas:
  "hd hd hd hd hd "
  "ma ma ma . sb"
  "ft ft ft ft ft";
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.header {
  grid-area: hd;
}
.main {
  grid-area: ma;
}
.sidebar {
  grid-area: sb;
}
.footer {
  grid-area: ft;
}

area로 이름을 붙이고 areas로 땅따먹기!

row-gap (grid- row- gap)

행들간의 간격 (gutter의 너비를 설정)

column-gap

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
.container{
  border: 5px dashed orange;
  width:400px;
  height: 400px;

  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows:repeat(4,1fr);
  row-gap: 20px;
  column-gap: 50px;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}


gap

  row-gap: 20px;
  column-gap: 50px;

을 단축 속성으로 

  gap: 20px 50px;

gap row, column 순으로 표현할 수 있음 

 

grid- auto- rows

내가 설정한 것 외의 item이 들어오게 되면 암시적으로 크기를 어떻게 설정할 것인가 

 

template rows, template column 은 item이 존재하지 않더라도 영역을 차지

auto rows, auto column은 암시적으로 지정하기 때문에 item이 없으면 그 영역을 볼 수 없음

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">8</div>
  <div class="item">8</div>
  <div class="item">8</div>
  <div class="item">8</div>
  <div class="item">8</div>
.container{
  border: 5px dashed orange;


  display: grid;

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:100px 150px 80px;

  grid-auto-rows:100px;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}


grid-auto-columns

 

container- grid- auto- flow

item들이 자리 잡는 흐름

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
.container{
  border: 5px dashed orange;


  display: grid;

  grid-template-columns: repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);

  grid-auto-flow: column;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}


 

 

 

 

 

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
.container{
  border: 5px dashed orange;


  display: grid;

  grid-template-columns: repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);

  grid-auto-flow: row;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:nth-child(2){
  grid-column: span 3;
}

.container{
  border: 5px dashed orange;


  display: grid;

  grid-template-columns: repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);

  grid-auto-flow: row dense;
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:nth-child(2){
  grid-column: span 3;
}

row dense 하게 되면 2칸 차지해서 못왔던 3, 4 번들이 빈칸으로 들어오게 됨 (빈영역 없이 꽉꽉 채워짐)

container - grid (shorthand)

외재적인 속성 (명시적) grid-templat-row, grid-template-column, grid-template-areas,

내재적인 속성 (암시적) grid-auto-rows, grid-auto-columnsm grid-auto-flow를 한번에 설정

 

grid : ~~~~~~ / @@@@@ 

-----> /를 기준으로 앞에는 row, 뒤에는 column

 

 

같은말

  grid-template-columns: 100px 200px;
  grid-template-rows:1fr 2fr;
  grid: 1fr 2fr/100px 200px;

 

auto flow row면 /앞에, auto flow column이면 / 뒤에 작성 

 

 

container-jusitify-content

선행조건: 바깥쪽 container의 크기가 안에 있는 content보다 커서 남는 공간이 있어야 함. 그 남는 공간을 어떻게 활용할지 정의할 수 있음. 

 

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
.container{
  border: 5px dashed orange;

  width: 100%;
  height: 500px;


  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,100px);

  justify-content: space-between;
 
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

jusitify content: start, end, center, space-around, space between 가능 (메인축)

aling-content

.container{
  border: 5px dashed orange;

  width: 100%;
  height: 500px;


  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,100px);

  align-content: center;
 
}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

aline content: start, end, center, space-around, space between 가능 (교차축)

container-justify-items

하나의 틀 안에서 하나의 아이템들을 어떻게 위치 해 놓을지 정의 

원래는 stretch

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
.container{
  border: 5px dashed orange;

  width: 100%;
  height: 500px;


  display: grid;
  grid-template-rows: repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);

  justify-items: end;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
  width:100%;
  height: 100%;
}

.item:nth-child(1) {
  width: 50px;
  height: 50px;
}


container- aline-items

.container{
  border: 5px dashed orange;

  width: 100%;
  height: 500px;


  display: grid;
  grid-template-rows: repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);

  justify-items: center;
  align-items: center;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;

}

.item:nth-child(1) {
  width: 50px;
  height: 50px;
}


item-grid-row

grid-row-start (어디서부터 시작하고) , grid-row-end (어디까지 끝나는지)

줄대로 숫자가 쓰여져있음

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:first-child {
  background-color: coral;

  grid-row-start: 1;
  grid-row-end: 4;

}

 같은말

 

 grid-row-start: 1;
  grid-row-end: 4
grid-row: 1/ 4;
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:first-child {
  background-color: coral;

grid-row: 2/span 2;

}

span 활용

grid-column

 

.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:first-child {
  background-color: coral;

grid-row: 1/ -1;
grid-column: 1 / 3;

.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:first-child {
  background-color: coral;

grid-row: 2/span 2;
grid-column: 2/ -1;

}

 

 

 

item-grid-area

grid-row-start, grid-colmn-start, grid-row-end, grid-colmn-end 의 short hand

 

같은말


grid-row: 4 /span 2;
grid-column: 2/ -1;

 

  grid-area: 4 /2/span2/-1;

 

 

 

order 

프렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정 

 

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>

  </div>
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
}

.item:nth-child(5) {
  order:-1;
}

 

 

z-index

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,1fr);

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 24px;
  opacity: 0.7;
}

.item:nth-child(1) {
  grid-row: 1 /span 2;
  grid-column:  1 / span 2;
  z-index: 5;
}

.item:nth-child(2) {
  grid-row: 1/ 2;
  grid-column:2 / 4;
  z-index: 3;
}

 

 

grid 단위 

 

min-content

    <div class="item">
      Lorem ipsum
      dolor sit amet
      consectetur adipisicing
    <div class="item">2</div>
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,180px);
  grid-template-columns: min-content 1fr 1fr;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 18px;

 

max-content

 
.container{
  border: 5px dashed orange;

  display: grid;
  grid-template-rows: repeat(3,180px);
  grid-template-columns: max-content 1fr 1fr;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
  font-size: 18px;

}

 

 

 

 

 

auto-fill

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
 
.container{
  border: 5px dashed orange;

  display: grid;

  grid-template-columns: repeat(auto-fill,100px);
  grid-template-rows:50px;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
}

늘리면 늘릴수록 옆으로 들어옴

.container{
  border: 5px dashed orange;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

  grid-auto-rows:50px;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
}

살짝 늘려지다가 공간이 나오면 자연스럽게 옆으로 합류

auto-fit

    <div class="item">1</div>
    <div class="item">2</div>
.container{
  border: 5px dashed orange;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

  grid-auto-rows:50px;

}

.item {
  background-color: paleturquoise;
  border: 3px solid blue;
}

남는 공간 없이 사용

저작자표시 비영리 변경금지

티스토리툴바