[TIL] 220204

Lee Syong·2022년 2ė›” 4ėž
0

TIL

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

📝 ė˜Ī늘 한 ęēƒ

  1. grid - fr / grid-template / place-items

📚 ë°°ėšī ęēƒ

1. grid

1) fr

화ëĐī 큎ęļ°ę°€ ëģ€í•ī도 itemė˜ ëđ„ėœĻėī 똑같ė„ ėˆ˜ ėžˆë„록 flexible grid layoutė„ 만ë“Īęļ° ėœ„í•ī frėī띾는 ë‹Ļėœ„ëĨž ė‚ŽėšĐ할 ėˆ˜ ėžˆë‹Ī.
1frė˜ 큎ęļ°ëŠ” grid containerė—ė„œ 'ė‚ŽėšĐ 가ëŠĨ한 ęģĩ간'ė„ ęļ°ë°˜ėœžëĄœ ęģ„ė‚°ëœë‹Ī.
ę·ļ럮ëŊ€ëĄœ frė„ rowė— ė‚ŽėšĐ하ęļ° ėœ„í•īė„œëŠ” grid containerė— 'height'ëĨž ė§€ė •í•īė•ž 한ë‹Ī.

<div class="grid">
  <div class="header"></div>
  <div class="content"></div>
  <div class="nav"></div>
  <div class="footer"></div>
</div>
.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

2) grid-template

  1. grid-areaëĨž ėīėšĐí•ī cellė— ėīëĶ„ė„ ëķ™ėļë‹Ī.
  2. ëĻžė €, grid containerė—ė„œ row(cell ėīëĶ„)ëĨž ėž‘ė„ąí•œë‹Ī.
  3. 각 rowė˜ 높ėīëĨž fr ë‹Ļėœ„ëĄœ ėž‘ė„ąí•œë‹Ī.
  4. 마ė§€ë§‰ rowė— 각 columnė˜ 너ëđ„도 fr ë‹Ļėœ„ëĄœ ėž‘ė„ąí•œë‹Ī.
.grid {
  display: grid;
  gap: 10px;
  height: 50vh; /* ðŸ’Ą grid containerė— heightëĨž ė§€ė •í•īė•ž 한ë‹Ī */
  grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
}

.header {
  background-color: lightpink;
  grid-area: header;
}

.content {
  background-color: lightskyblue;
  grid-area: content;
}

.nav {
  background-color: lightseagreen;
  grid-area: nav;
}

.footer {
  background-color: mediumaquamarine;
  grid-area: footer;
}

한íŽļ, grid-templateė—ė„œ row마ë‹Ī ė•ž ë’Ī로 line ėīëĶ„ė„ ė§€ė •í•  ėˆ˜ë„ ėžˆë‹Ī.

ė°ļęģ ëĄœ grid-templateė—ė„œ repeat(4, 1fr)ė€ ė‚ŽėšĐ할 ėˆ˜ ė—†ë‹Ī.
ė ëŠ”ë‹ĪëĐī 1fr 1fr 1fr 1fr로 ė ė–īė•ž 한ë‹Ī.

grid-template:
  [header-start] "header header header header" 1fr [header-end]
  [content-start] "content content content nav" 2fr [content-end]
  [footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;

ėīėē˜ëŸž grid-templateė„ ė‚ŽėšĐ하ëĐī 화ëĐīėī ė–īë–Ī ëŠĻėŠĩėžė§€ ė―”ë“œ ėƒė—ė„œ ę·ļëĶžė„ ę·ļëĶŽë“Ŋėī ėīė•žęļ°í•  ėˆ˜ ėžˆë‹Ī.

3) place items

ėœ„ė˜ HTML ė―”ë“œė—ė„œ grid item ė•ˆė— text만 ėķ”ę°€í•īėĢžė—ˆë‹Ī.

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

(1) justify-items

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-items: stretch;
}

grid containerė—ė„œ ė‚ŽėšĐ되는 justify-itemsė˜ ęļ°ëģļ값ė€ stretchėīë‹Ī.
ėī는 grid itemë“Īėī ėžė‹ ë“Īė˜ 큎ęļ°ëĨž 늘ë Īė„œ grid containerė˜ 큎ęļ°ëĨž ėą„ėš°ë„록 한ë‹Ī.

ė˜ˆė œė—ė„œ grid containerė˜ 큎ęļ°ëŠ” heightëĨž 50vh로 ė§€ė •í–ˆęļ° 때ëŽļė— ëļŒëžėš°ė € 큎ęļ°ė˜ ė ˆë°˜ė— í•īë‹đ한ë‹Ī.
grid item 16개로 ëļŒëžėš°ė € 큎ęļ°ė˜ ė ˆë°˜ė„ ėą„ėš°ęļ° ėœ„í•ī grid itemë“Īė˜ 큎ęļ°ę°€ 늘ė–ī난 ęēƒėīë‹Ī.

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-items: center;
}

ę·ļ ė™ļė—ë„ justify-itemsė˜ 값ėœžëĄœëŠ” start, center, end 등ė˜ 값ėī ė˜Ž ėˆ˜ ėžˆë‹Ī.
ë‹Ī만, justify-itemsė˜ 값ėœžëĄœ stretch가 ė•„ë‹Œ ë‹ĪëĨļ 값ė„ ė§€ė •í•˜ë”띞도 heightė— ė˜í•ī ė§€ė •ëœ grid containerė˜ rowė˜ 높ėī는 ëģ€í•˜ė§€ ė•ŠëŠ”ë‹Ī.

(2) align-items

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
}

마ė°Žę°€ė§€ëĄœ align-itemsė˜ 값ėœžëĄœ stretch가 ė•„ë‹Œ ë‹ĪëĨļ 값ė„ ė§€ė •í•˜ë”띞도 1fr로 ė§€ė •ëœ grid containerė˜ columnė˜ 너ëđ„는 ëģ€í•˜ė§€ ė•ŠëŠ”ë‹Ī.

한íŽļ, textëĨž ė§€ė›Œëē„ëĶŽëĐī 너ëđ„ė™€ 높ėī가 ė—†ęļ° 때ëŽļė— 개발ėž 도ęĩŽė˜ element 탭ė—ė„œ 16개ė˜ ęĩŽė—­ėœžëĄœ 나뉘ė–īė§„ ęēƒë§Œ 확ėļ할 ėˆ˜ ėžˆė„ ëŋ ëļŒëžėš°ė € 화ëĐīė—ė„œëŠ” ė•„ëŽīęēƒë„ ëģž ėˆ˜ ė—†ë‹Ī.

text ė—†ėī 화ëĐīė—ė„œ grid itemė„ ëģīęļ° ėœ„í•īė„œëŠ” 각 grid itemė— widthė™€ height 값ė„ ė§€ė •í•īė•ž 한ë‹Ī.

(3) place-items

place-items: align-items 값(ėˆ˜ė§) justify-items 값(ėˆ˜í‰);

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: end center; ðŸ’Ą
}

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

  1. grid
profile
ëŠĨ동ė ėœžëĄœ ė‚īėž, 행ëģĩ하ęēŒðŸ˜

0개ė˜ 댓ęļ€