[TIL] 220206

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

TIL

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

📝 ė˜Ī늘 한 ęēƒ

  1. grid - minmax() / auto-fill, auto-fit / min-content, max-content

📚 ë°°ėšī ęēƒ

1. grid

1) minmax()

minmax()ëĨž ėīėšĐí•ī grid itemė˜ ėĩœė†Ÿę°’ęģž ėĩœëŒ“ę°’ė„ ė •í•  눘 ėžˆë‹Ī.

똈ëĨž ë“Īė–ī, grid itemė˜ 너ëđ„ëĨž 가ëŠĨ한 한 큎ęēŒ ë§Œë“Īęģ  ė‹ķė§€ë§Œ 100px ėī하로는 ėž‘ė•„ė§€ė§€ ė•Šęļ°ëĨž ė›í•  때 minmax(100px, 1fr) ėī띞ęģ  ė„Īė •í•  눘 ėžˆë‹Ī.

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

2) auto-fill / auto-fit

auto-fill & auto-fit

auto-fillęģž auto-fitė€ repeat()ė—ė„œë§Œ ė‚ŽėšĐ한ë‹Ī.

ėž‘ė€ 화ëĐīė—ė„œëŠ” auto-fillęģž auto-fitė€ ė°Ļėī가 ė—†ë‹Ī.
ę·ļ럮나, grid itemė˜ 눘ëģīë‹Ī 화ëĐīė˜ 큎ęļ°ę°€ ėŧĪė§€ëĐī auto-fillęģž auto-fitė€ ė°ĻėīëĨž ëģīėļë‹Ī.

grid itemė˜ ėˆ˜ë‚˜ 큎ęļ°ëĨž ė‚Žė „ė— ė•Œ 눘 ė—†ęą°ë‚˜ ë°˜ė‘í˜• ë””ėžėļė„ 할 때 뜠ėšĐ하ęēŒ ėīėšĐ할 눘 ėžˆë‹Ī.

(1) auto-fill

auto-fill

.grid {
  display: grid;
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

rowëĨž columns로 ėą„ėšīë‹Ī.
ėœ„ė™€ 같ėī grid itemė˜ ėˆ˜ę°€ 렁ė–īė„œ rowëĨž ë‹Ī ėą„ėš°ė§€ ëŠŧ한ë‹ĪëĐī ëđˆ columns로띾도 rowëĨž ë‹Ī ėą„ėšīë‹Ī.

(2) auto-fit

auto-fit

.grid__second {
  display: grid;
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

row뗐 딱 맞도록 í˜„ėžŽ grid itemë“Īė„ 늘ëͰë‹Ī.

3) min-content / max-content

repeat(), minmax()뙀 í•Ļęŧ˜ ė‚ŽėšĐí•ĻėœžëĄœėĻ 뙄ëē―하ęēŒ ë°˜ė‘í˜• ë””ėžėļė„ ęĩŽí˜„í•  눘 ėžˆë‹Ī.

(1) min-content

min-content는 ė–ī레 ë‹Ļėœ„ëĄœ ëŠė—ˆė„ 때 가ėžĨ ęļī ë‹Ļė–īëĨž ęļ°ėĪ€ėœžëĄœ 하는 ėĩœė†Œ 너ëđ„ëĨž 말한ë‹Ī.
boxëĨž content가 ėž‘ė•„ė§ˆ 눘 ėžˆëŠ” 만큾 ėž‘ęēŒ ë§Œë“ ë‹Ī.

(2) max-content

max-content는 content가 wrap ë˜ė§€ ė•Šęļ° ėœ„í•ī í•„ėš”í•œ ėĩœëŒ€ 높ėī í˜đė€ 너ëđ„ëĨž 말한ë‹Ī.
boxëĨž contentëĨž 폎í•Ļ하ęļ° ėœ„í•ī í•„ėš”í•œ 만큾 큎ęēŒ ë§Œë“ ë‹Ī.

(3) ë°˜ė‘í˜• ë””ėžėļ

gridëĨž ėīėšĐí•ī ë°˜ė‘í˜• ë””ėžėļė„ ęĩŽí˜„í•īëģīë Īęģ  í•œë‹Ī.

<div class="grid">
  <div class="item">Lorem ipsum dolor sit amet.</div>
  <div class="item">Lorem, ipsum dolor sit amet consectetur</div>
  <div class="item">Lorem, ipsum dolor.</div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi
  </div>
</div>
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(max-content, 1fr)); ðŸ’Ą
  grid-auto-rows: 100px;
}

grid ë°˜ė‘í˜• 똈렜

grid itemė˜ columnė˜ 너ëđ„ė˜ ėĩœė†Ÿę°’ė€ content가 wrap ë˜ė§€ ė•Šęļ° ėœ„í•ī í•„ėš”í•œ ėĩœëŒ€ę°’(max-content)로 ė„Īė •í•˜ęģ , grid itemė˜ columnė˜ 너ëđ„ė˜ ėĩœëŒ“ę°’ė€ 1fr로 ė„Īė •í–ˆë‹Ī.

1, 2, 4ëēˆė§ļ div는 ė „ėžę°€, 3ëēˆė§ļ div는 í›„ėžę°€ 렁ėšĐ된 ęēƒė„ 확ėļ할 눘 ėžˆë‹Ī.

한íŽļ, auto-fit, minmax, max-contentëĨž 혞ėšĐí•˜ė—Ž 또 ë‹ĪëĨļ ë°˜ė‘í˜• ë””ėžėļė„ ęĩŽí˜„í•  눘 ėžˆë‹Ī.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  grid-auto-rows: 100px;
}

ėœ„ ęē―ėš°ė—ëŠ” auto-fitė„ ė§€ė •í–ˆęļ° ë•ŒëŽļ뗐 row뗐 딱 맞도록 í˜„ėžŽ grid itemë“Īėī 늘ė–īë‚˜ė•ž 한ë‹Ī.
ę·ļ럮나 minmax(120px, max-content)로 ėļí•ī grid itemė€ 120px ėī하로는 ėž‘ė•„ė§ˆ 눘 ė—†ęģ , 'max-content ėīėƒėœžëĄœëŠ” ėŧĪ마 눘 ė—†ë‹Ī.'


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

  1. grid
profile
dev log

0ę°œė˜ 댓ęļ€