ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [CSS Grid] min-content, max-content
    HTML & CSS 2021. 9. 3. 12:57

    min-content, max-content 를 사용하면 그리드 안의 content 의 크기에 맞게 박스 크기를 조절할 수 있음.

     

    min-content : content 에 맞게 박스가 최소화

    max-content : content 에 맞게 박스가 최대화

     

    minmax, auto-fit 등과 함께 사용하면 컨텐츠 사이즈에 맞는 반응형을 만들 수 있음.

     

     

    예시 1. min-content

        <div class="grid">
          <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut </div>
          <div class="item">Lorem ipsum</div>
        </div>

    .grid {
      color: white;
      display: grid;
      gap: 5px;
      grid-template-columns: min-content min-content;
      grid-auto-rows: 100px;
      margin-bottom: 30px;
    }
    
    .item:nth-child(odd) {
      background-color: skyblue;
    }
    
    .item:nth-child(even) {
      background-color: blueviolet;
    }

     

    예시 2. max-content

    .grid {
      color: white;
      display: grid;
      gap: 5px;
      grid-template-columns: max-content max-content;
      grid-auto-rows: 100px;
      margin-bottom: 30px;
    }
    
    .item:nth-child(odd) {
      background-color: skyblue;
    }
    
    .item:nth-child(even) {
      background-color: blueviolet;
    }

     

    예시 3. repeat() 와 max-content

        <div class="grid">
          <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
          <div class="item">Lorem ipsum</div>
          <div class="item">Lorem ipsum dolor sit</div>
          <div class="item">Lorem ipsum</div>
          <div class="item">Lorem ipsum dolor sit amet, consectetur</div>
        </div>
    .grid {
      color: white;
      display: grid;
      gap: 5px;
      grid-template-columns: repeat(5, max-content);
      grid-auto-rows: 100px;
      margin-bottom: 30px;
    }
    
    .item:nth-child(odd) {
      background-color: skyblue;
    }
    
    .item:nth-child(even) {
      background-color: blueviolet;
    }

     

    예시 4. repeat() 와 min-content

    .grid {
      color: white;
      display: grid;
      gap: 5px;
      grid-template-columns: repeat(5, min-content);
      grid-auto-rows: 100px;
      margin-bottom: 30px;
    }
    
    .item:nth-child(odd) {
      background-color: skyblue;
    }
    
    .item:nth-child(even) {
      background-color: blueviolet;
    }

     

    예시 5. minmax() 와 max-content

    .grid {
      color: white;
      display: grid;
      gap: 5px;
      grid-template-columns: repeat(5, minmax(max-content, 1fr));
      grid-auto-rows: 100px;
      margin-bottom: 30px;
    }
    
    .item:nth-child(odd) {
      background-color: skyblue;
    }
    
    .item:nth-child(even) {
      background-color: blueviolet;
    }

    여기서 2번째, 4번째 박스를 보면, max-content 가 아니라 1fr 이 적용된 것을 볼 수 있음. 1,3,5 박스의 max-content 를 주고 나머지 박스에 1fr 이 적용된 것.

     

    예시 6. auto-fit 과 max-content

    .grid {
      color: white;
      display: grid;
      gap: 5px;
      grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
      grid-auto-rows: 100px;
      margin-bottom: 30px;
    }
    
    .item:nth-child(odd) {
      background-color: skyblue;
    }
    
    .item:nth-child(even) {
      background-color: blueviolet;
    }

    큰 화면에서는 최대 너비가 max-content 이기 때문에 auto-fit 을 해도 더 늘어나지 않음.

    작은 화면에서는 최소 너비인 100px을 유지하는 모습.

    'HTML & CSS' 카테고리의 다른 글

    [CSS Grid] minmax 로 반응형 만들기  (0) 2021.09.03
    [CSS Grid] grid-auto  (0) 2021.09.03
    [CSS Grid] 그리드 정렬  (0) 2021.09.03
    [CSS Grid] 그리드 기초, 그리드 템플릿  (0) 2021.09.02
    [HTML] HTML 과 HTML 코드의 구성  (0) 2021.04.03
Designed by Tistory.