[TIL] 220203

dev·2022년 2ė›” 3ėž
0

TIL

ëŠĐ록 ëģīęļ°
168/204
post-thumbnail

📝 ė˜Ī늘 한 ęēƒ

  1. grid

📚 ë°°ėšī ęēƒ

1. grid

1) rows and columns

grid container뗐 grid-template-areasëĨž ė§€ė •í•˜ęģ  grid item뗐 grid-areaëĨž ëķ€ė—Ží•˜ëŠ” ëŒ€ė‹ 
grid item뗐 grid-column-start(end)뙀 grid-row-start(end)ëĨž ė‚ŽėšĐ할 ėˆ˜ë„ ėžˆë‹Ī.

grid rows and columns

í›„ėžė˜ ęē―뚰 grid container뗐 gap 프로퍾티ëĨž ė‚ŽėšĐí•īė„œ ė›í•˜ëŠ” ëŠĻė–‘ė˜ 레ėīė•„ė›ƒė„ 더 ė‰―ęēŒ ë§Œë“Ī 눘 ėžˆë‹Ī.
뎞률 ė „ėžė˜ ęē―ėš°ė—ë„ gap 프로퍾티ëĨž ė‚ŽėšĐ할 눘 ėžˆė§€ë§Œ ė›í•˜ëŠ” ëŠĻė–‘ė˜ 레ėīė•„ė›ƒė„ 만ë“Īęļ°ė— í›„ėžę°€ 더 ė‰―ë‹Ī.

<div class="grid">
  <div class="header"></div>
  <div class="content"></div>
  <div class="nav"></div>
  <div class="footer"></div>
</div>

ėĢžė„ ėē˜ëĶŽëœ ëķ€ëķ„ėī grid-template-areas뙀 grid-areaëĨž ė‚ŽėšĐí–ˆė„ ë•Œė˜ ė―”ë“œėīë‹Ī.

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

.header {
  background-color: lightpink;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

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

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

.footer {
  background-color: mediumaquamarine;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
}

2) shortcut

grid-column-start(end)뙀 grid-row-start(end)ëĨž ėĪ„ė—Ž ė“ļ 눘 ėžˆë‹Ī.

(1) grid-column / grid-row

start뙀 endëĨž 따로 ė“ļ í•„ėš” ė—†ėī ë‹ĪėŒęģž ę°™ėī ėĪ„ėž 눘 ėžˆë‹Ī.

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

.header {
  background-color: lightpink;
  grid-column: 1 / 5;
  grid-row: 1 / 2;
}

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

.nav {
  background-color: lightseagreen;
  grid-column: 4 / 5;
  grid-row: 2 / 4;
}

.footer {
  background-color: mediumaquamarine;
  grid-column: 1 / 5;
  grid-row: 4 / 5;
}

(2) 끝ėī ė–īë”˜ė§€ ëŊļëĶŽ ė•Œ 눘 ė—†ė„ 때 ėŒėˆ˜ę°’ ė‚ŽėšĐ

똈ëĨž ë“Īė–ī, lineėī 멇 氜ėļė§€, ė–īë””ė„œ ëë‚˜ëŠ”ė§€ ė‹ ęē― ė“ļ í•„ėš” ė—†ėī -1ė„ ė ėœžëĐī ę·ļ ėĪ„ lineė˜ 끝ęđŒė§€ grid itemėī 만ë“Īė–īė§„ë‹Ī.

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

ėī는 ë‹ĪėŒęģž ę°™ë‹Ī.

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

ë‹ĪëĨļ ė˜ˆëĄœëŠ”, ė‹Ī렜 content가 ė–žë§ˆë‚˜ ęļļ ęēƒėļė§€ ëŊļëĶŽ ė•Œ 눘 ė—†ė„ 때 ė‚ŽėšĐ하ëĐī 뜠ėšĐ하ë‹Ī.

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

ė‹Īė œëĄœ content가 4ė—ė„œ ëë‚ ė§€ 7ė—ė„œ ëë‚ ė§€ ëŠĻëĨž 때 -2ëĨž ė‚ŽėšĐ하ëĐī ëŽīėĄ°ęąī ëė—ė„œ 2ëēˆė§ļ lineęđŒė§€ grid itemėī 만ë“Īė–īė§„ë‹Ī.

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

(3) span

ė‹œėž‘ęģž ë lineė„ ė ëŠ” ëŒ€ė‹ ė— spanė„ ė‚ŽėšĐ할 눘 ėžˆë‹Ī.
ė–žë§ˆë‚˜ ë§Žė€ grid cellė„ 氀맀ęģ  ėžˆëŠ”ę°€ëĨž ė ëŠ” ęēƒėīë‹Ī.

.header {
  background-color: lightpink;
  grid-column: 1 / -1;
  grid-row: span 1;
}

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

í•„ėš”í•œ ęē―뚰 ė‹œėž‘ lineė„ ė•žė— í•Ļęŧ˜ 렁ė–īėĪ„ 눘 ėžˆë‹Ī.

grid-row: 1 / span 1;

3) line뗐 ėīëĶ„ ė§“ęļ°

spanėī ė•„ë‹ˆëž lineė„ ė‚ŽėšĐ하ęģ ėž 할 때
í•„ėˆ˜ëŠ” ė•„ë‹ˆęģ  ė„ íƒ ė‚Ží•­ėīė§€ë§Œ line뗐 ėīëĶ„ė„ ė§€ė–īėĪ„ ėˆ˜ë„ ėžˆë‹Ī.

.grid {
  display: grid;
  grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px [fifth-line];
  grid-template-rows: repeat(4, 100px [line]);
  gap: 10px;
}

.header {
  background-color: lightpink;
  grid-column: first-line / fifth-line;
  grid-row: 1 / line 1;
}

.content {
  background-color: lightskyblue;
  grid-column: first-line / fourth-line;
  grid-row: line 1 / line -2;
}

.nav {
  background-color: lightseagreen;
  grid-column: fourth-line / fifth-line;
  grid-row: line 1 / line -2;
}

.footer {
  background-color: mediumaquamarine;
  grid-column: first-line / fifth-line;
  grid-row: line 3 / line 4;
}

ėī때 repeat(4, 100px [line])ė—ė„œ 100px [line] ėī띞ęģ  í–ˆęļ° ë•ŒëŽļ뗐 ėĩœėĒ… grid containerė—ė„œ ë§Ļ ėœ„ lineė€ ėīëĶ„ ė§€ė–īėĪ€ [line]뗐 í•īë‹đë˜ė§€ ė•ŠëŠ”ë‹Ī.
grid containerė˜ ë§Ļ ėœ„ lineė„ 가ė ļė˜Īęļ° ėœ„í•īė„œëŠ” ėīëĨž ė˜ëŊļ하는 1ė„ 렁ė–īė•ž 한ë‹Ī.

grid-row: 1 / line 1;

âœĻ ë‚īėž 할 ęēƒ

  1. grid
profile
dev log

0ę°œė˜ 댓ęļ€