Grid

Doozuuยท2023๋…„ 3์›” 28์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
8/8

๐Ÿ“Œ grid-column-start

: ๊ทธ๋ฆฌ๋“œ ์„ธ๋กœ์„ ์—์„œ ์‹œ์ž‘๋˜๋Š” ์˜์—ญ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

  • grid-column-start: 3
    ๊ทธ๋ฆฌ๋“œ ์„ธ๋ฒˆ์งธ ์„ธ๋กœ์„ ์—์„œ ์‹œ์ž‘๋˜๋Š” ์˜์—ญ(๊ทธ๋ฆฌ๋“œ์˜ ์™ผ์ชฝ์—์„œ ์„ธ๋ฒˆ์งธ ์—ด(column) ํ•ญ๋ชฉ)์„ ๋œปํ•œ๋‹ค.

  • grid-column-start: -3
    ๊ทธ๋ฆฌ๋“œ์˜ ์˜ค๋ฅธ์ชฝ์—์„œ ์„ธ๋ฒˆ์งธ ์„ธ๋กœ์„ ์—์„œ ์‹œ์ž‘๋˜๋Š” ์˜์—ญ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.



๐Ÿ“Œ grid-column-end

grid-column-start์ด ๋‹จ๋…์œผ๋กœ ์‚ฌ์šฉ๋ ๋•Œ๋Š”, ํ•œ๊ฐœ์˜ ๊ทธ๋ฆฌ๋“œ ์—ด(column)์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
ํ•˜์ง€๋งŒ, grid-column-end ์†์„ฑ์„ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ ์—ด(column)์— ๊ฑธ์ณ ํ™•์žฅ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

์˜ˆ์‹œ

์™ผ์ชฝ์˜ 1๋ฒˆ์งธ ์„ธ๋กœ์„ ์—์„œ 4๋ฒˆ์งธ ์„ธ๋กœ์„ ๊นŒ์ง€๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋ ค๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 1;
  grid-column-end : 4;
}



๐Ÿ“Œ span

๊ทธ๋ฆฌ๋“œ ์„ ์˜ ์‹œ์ž‘๊ณผ ๋ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ทธ๋ฆฌ๋“œ ํ•ญ๋ชฉ์„ ์ •์˜ํ•˜๋Š” ๋Œ€์‹ , span์„ ์ด์šฉํ•˜์—ฌ ์—ด(column)์˜ ๋„“์ด๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • span์€ ์–‘์ˆ˜๋งŒ ์„ค์ • ๊ฐ€๋Šฅํ•˜๋‹ค.
  • grid-column-start: 1, grid-column-end: span 2 ์ด๋ฉด 1๋ฒˆ์งธ ์„ธ๋กœ์„ ์—์„œ ๋ถ€ํ„ฐ ์˜ค๋ฅธ์ชฝ 2๊ฐœ๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
  • grid-column-start๋ฅผ ์ด์šฉํ•˜์—ฌ ๋งˆ์ง€๋ง‰ ์œ„์น˜์—์„œ ์ƒ๋Œ€์ ์œผ๋กœ ํ•ญ๋ชฉ์˜ ๋„“์ด๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • grid-column-start : span 3, grid-column-end: 6 ์ด๋ฉด 6๋ฒˆ์งธ ์„ธ๋กœ์„ ์—์„œ ๋ถ€ํ„ฐ ์™ผ์ชฝ 3๊ฐœ๋ฅผ ์นด๋ฆฌํ‚จ๋‹ค.



๐Ÿ“Œ grid-column

๋งค๋ฒˆ grid-column-start์™€ grid-column-end๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๋Œ€์‹  grid-column์„ ์ด์šฉํ•˜๋ฉด ๋‹จ์ถ•ํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ๋‹ค. /๋กœ ๊ตฌ๋ถ„ํ•ด์„œ ์“ด๋‹ค.

  • grid-column: 2 / 4 ๋Š” ๊ทธ๋ฆฌ๋“œ ํ•ญ๋ชฉ์„ ๋‘๋ฒˆ์งธ ์ˆ˜์ง์„ ์—์„œ ๋„ค๋ฒˆ์งธ ์ˆ˜์ง์„ ๊นŒ์ง€๋กœ ์„ค์ •ํ•œ๋‹ค.



๐Ÿ“Œ grid-row-start

: ๊ทธ๋ฆฌ๋“œ ๊ฐ€๋กœ์„ (ํ–‰)์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.



๐Ÿ“Œ grid-row

: grid-column๊ณผ ๋ฐฉํ–ฅ๋งŒ ๋‹ค๋ฅด๊ณ  ๋™์ผํ•˜๋‹ค.

์˜ˆ์‹œ

6๋ฒˆ์งธ ์—ด์—์„œ ์™ผ์ชฝ์œผ๋กœ 4๊ฐœ, 6๋ฒˆ์งธ ํ–‰์—์„œ ์œ„๋กœ 5๊ฐœ

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column : span 4 / 6;
  grid-row : span 5 / 6;
}



๐Ÿ“Œ grid-area

grid-column์™€ grid-row ๋ชจ๋‘๋ฅผ ์ž…๋ ฅํ•˜๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋งŽ์€๊ฒฝ์šฐ, grid-area๋ฅผ ์ด์šฉํ•˜์—ฌ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
grid-area์€ /๋กœ ๊ตฌ๋ถ„์ง€์–ด grid-row-start, grid-column-start, grid-row-end, grid-column-end์ˆœ์œผ๋กœ ์ž…๋ ฅ ๊ฐ€๋Šฅํ•˜๋‹ค.

์˜ˆ์‹œ

#water {
grid-area : 1 / 2 / 4 / 6;
}



๐Ÿ“Œ order

๊ธฐ๋ณธ์ ์œผ๋กœ, ๊ทธ๋ฆฌ๋“œ์˜ ๋ชจ๋“  ์š”์†Œ๋“ค์€ order์˜ ๊ฐ’์ด 0์ด์ง€๋งŒ, z-index์™€ ๊ฐ™์ด ์–‘์ˆ˜์™€ ์Œ์ˆ˜์˜ ๊ฐ’ ๋ชจ๋‘ ์„ค์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค.



๐Ÿ“Œ repeat

๋™์ผํ•œ ๋„ˆ๋น„์˜ ์—ด(column)๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์ง€์ •ํ•˜๋Š” ๋Œ€์‹  repeat์„ ์‚ฌ์šฉํ•ด ๋‹จ์ถ•ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • grid-template-columns: 20% 20% 20% 20% 20% ๋Œ€์‹  grid-template-columns: repeat(5, 20%) ์™€ ๊ฐ™์ด ์„ค์ •ํ•ด๋„ ๋™์ผํ•˜๋‹ค.



๐Ÿ“Œ ๋‹จ์œ„

px, em, % ๋“ฑ์˜ ์„œ๋กœ ๋‹ค๋ฅธ ๋‹จ์œ„๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

#garden {
  display: grid;
grid-template-columns : 100px 3em 40%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}



๐Ÿ“Œ fr

Grid์—๋Š” ์ƒˆ๋กœ์šด ๋‹จ์œ„์ธ fractional fr์ด ์žˆ๋‹ค.

๊ฐ fr ๋‹จ์œ„๋“ค์€ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„์„ ํ•˜๋‚˜๋กœ ๊ณต์œ ํ•˜์—ฌ ํ• ๋‹นํ•œ๋‹ค.
์˜ˆ์‹œ๋กœ, ๋‘๊ฐœ์˜ element๋“ค์„ 1fr๊ณผ 3fr๋กœ ์„ค์ •์‹œ, ๊ณต๊ฐ„์ด 4๊ฐœ์˜ ๋™์ผํ•œ ํฌ๊ธฐ๋กœ ๊ณต์œ ๋œ๋‹ค. ์ฒซ๋ฒˆ์งธ element๋Š” ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„์˜ 1/4 ํฌ๊ธฐ, ๋‘๋ฒˆ์งธ element๋Š” 3/4 ํฌ๊ธฐ๋ฅผ ์ฐจ์ง€ํ•œ๋‹ค.

์˜ˆ์‹œ

์™ผ์ชฝ์— 75px์„ ๋‚จ๊ธฐ๊ณ , ๋‚จ์€ ๊ณต๊ฐ„์„ 3 : 2๋กœ ๋‚˜๋ˆˆ๋‹ค.

#garden {
  display: grid;
  grid-template-columns : 75px 3fr 2fr;
  grid-template-rows: 100%;
}



๐Ÿ“Œ grid-template-rows

grid-template-rows์€ grid-template-columns์™€ ๊ฑฐ์˜ ๋™์ผํ•˜๊ฒŒ ์ž‘๋™ํ•œ๋‹ค.



๐Ÿ“Œ grid-template

grid-template์€ grid-template-rows์™€ grid-template-columns๋ฅผ ์กฐํ•ฉํ•œ ๋‹จ์ถ• ์†์„ฑ์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, grid-template: 50% 50% / 200px ์€ ๊ฐ๊ฐ 50% ์ธ ๋‘๊ฐœ์˜ ํ–‰(row)๊ณผ 200px ๋„ˆ๋น„์˜ ํ•œ๊ฐœ์˜ ์—ด(column)์˜ ๊ทธ๋ฆฌ๋“œ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

์˜ˆ์‹œ

์•„๋ž˜ 50px๋‚จ๊ธฐ๊ณ  ์—ด์€ 20% 80%๋กœ ๋‚˜๋ˆ„๊ธฐ

#garden {
  display: grid;
grid-template : 1fr 50px / 20% 80%
}

์—ฐ์Šต ์‚ฌ์ดํŠธ : https://cssgridgarden.com/#ko

profile
๋ชจ๋“ ๊ฒŒ ์ƒˆ๋กญ๊ณ  ์žฌ๋ฐŒ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์ƒˆ์‹น

0๊ฐœ์˜ ๋Œ“๊ธ€