티스토리 뷰

Html,Css/Css

css : grid min-content , max-content

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 19. 00:00 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div class="item1">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque
        pariatur omnis, odit, nisi error expedita, placeat quo sed voluptatem
        animi sint! Quia tempora maxime ut harum deserunt voluptate laboriosam
        omnis.
      </div>
      <div class="item2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, magni
        aliquam. Illum excepturi ab magnam corrupti doloribus architecto autem
        quae. Facere, minima! Iste ad impedit nobis, eos itaque sint esse?
      </div>
    </div>
  </body>
</html>
.grid {
  display: grid;
  gap: 5px;
  height: 100vh;
  grid-template-columns: min-content max-content;
  /*
  min-content 는 콘텐츠의 가장 작게 보여주며 콘텐츠가 튀어나오지 않게 하는 기능이다.
  max-content 는 콘텐츠를 가장 크게 보여주며 콘텐츠의 크기를 벗어나지 않는 기능이다
  */
}

.item1 {
  background-color: aqua;
}

.item2 {
  background-color: brown;
}

.item3 {
  background-color: chocolate;
}

.item4 {
  background-color: darkgreen;
}

.item5 {
  background-color: darkmagenta;
}

 

.grid {
  display: grid;
  gap: 5px;
  height: 100vh;
  grid-template-columns: repeat(1, minmax(100px, max-content));
  grid-template-rows: repeat(auto-fit, minmax(min-content, max-content));
  /*
  min-content 는 콘텐츠의 가장 작게 보여주며 콘텐츠가 튀어나오지 않게 하는 기능이다.
  max-content 는 콘텐츠를 가장 크게 보여주며 콘텐츠의 크기를 벗어나지 않는 기능이다
  */
}

이런 식으로 응용을 하면 더욱 좋은 반응형 사이트를 만들 수 있을 것 같습니다

 

https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

 

min-content - CSS: Cascading Style Sheets | MDN

The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

 

max-content - CSS: Cascading Style Sheets | MDN

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.

developer.mozilla.org

 

'Html,Css > Css' 카테고리의 다른 글

scss : Scss mixins  (0) 2021.10.19
scss : Scss Variables and Nesting  (0) 2021.10.19
css : grid place-content  (0) 2021.10.18
scss : Scss Extends  (0) 2021.10.18
css: grid autofill , autofit  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함