당신이 모르는 CSS 그리드 기능!

이 글에서는 CSS의 그리드 기능인 fit-content(), minmax(), Repeat()를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

이 세 가지 기능은 그리드 레이아웃에서만 사용할 수 있습니다

[추천 튜토리얼: CSS 비디오 튜토리얼]

fit-content()

fit-content 함수는 매개변수를 받습니다. 길이 값은 문자 그대로 "내용에 적응"하는 것으로 해석될 수 있습니다.

<div class="fit-content-wrapper">
  <div class="fit-item item1">test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了fit-content(400px)</div>
  <div class="fit-item item2">test2 这是固定宽度width：400px</div>
  <div class="fit-item item3">test3 这是fit-content(400px)</div>
</div>

  .fit-content-wrapper{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: fit-content(400px) 400px fit-content(400px);
    grid-gap: 10px;
  }
  .fit-item{
    background-color: rgb(20, 106, 177);
  }

Effect

보시다시피,콘텐츠 길이가 지정된 길이보다 길면 텍스트가 자동으로 줄바꿈되어 지정된 길이를 초과하지 않습니다. 주어진 내용을 따릅니다. 길이는 길이를 설정합니다.

호환성

최신 브라우저에서는 문제가 없습니다. 주류 브라우저의 새 버전에서는 기본적으로 지원할 수 있지만 IE를 지원해야 하는 프로젝트에는 사용할 수 없습니다.

minmax()

minmax 함수는 닫힌 간격 범위[min,max]를 나타냅니다. 값이 min보다 작거나 같으면 값은 max보다 크거나 같습니다. 값은 max.

min-content와 같습니다. max-content

minmax 함수는 min-content 및 max-content 매개변수를 받습니다. 이 두 매개변수는 가장 짧은 콘텐츠 길이와 가장 긴 콘텐츠 길이를 나타냅니다. 아래 사례를 참조하세요.

    <div class="minmax-wrapper">
      <div class="minmax-item">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      </div>
      <div class="minmax-item">
        <p>test2222222222</p>
        <p>test 232232323233</p>
        <p>min-content采用最短的内容长度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最长的内容长度</p>
      </div>
    </div>

      .minmax-wrapper {
        margin-top: 100px;
        width: 100vw;
        display: grid;
        grid-gap: 10px;
        grid-template-columns:
          minmax(300px, 500px) minmax(50px, min-content)
          minmax(100px, max-content);
      }

Effect

두 번째 항목의 최소 콘텐츠 너비가 두 번째 항목의 첫 번째 p 태그임을 알 수 있습니다

minmax(50px, min-content)로 설정하면 최대 열 너비는 첫 번째 p 태그의 콘텐츠 너비를 초과할 수 없습니다.

세 번째 항목의 최대 콘텐츠 너비는 세 번째 p 태그의 콘텐츠 너비입니다

minmax(100px, max-content)로 설정하면 최대 콘텐츠 너비는 세 번째 p 태그를 초과하지 않습니다.

compatibility

는 IE를 지원하지 않지만 주류 최신 브라우저를 잘 지원합니다.

repeat()

repeat 함수는 그리드를 일괄 처리하는 데 사용되며 2개의 매개변수를 받습니다. 첫 번째 매개변수는 실행 횟수를 나타내고 두 번째 매개변수는 길이를 나타냅니다. 아래 예를 참조하세요.

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
    </div>

      .repeat-wrapper {
        margin-top: 100px;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-gap: 10px;
      }

Effect

grid-template-columns:peat(3, 100px)는grid-template-columns:100px 100px 100px;

auto-fill,auto-fit

과 동일합니다.

반복은 특정 횟수를 지정하는 것 외에도 자동 채우기 및 자동 맞춤 매개변수도 받습니다. 이 두 매개변수의 개념에 대해 이야기해 보겠습니다.

auto-fill

auto-fill은 항목에 따라 브라우저가 자동으로 횟수를 채우는 것을 의미합니다. 컨테이너가 매우 넓은 경우 나머지 그리드의 너비가 자동으로 예약됩니다. 그리드 컨테이너의 관련 축에 대한 명확한 크기 또는 최대 크기가 있는 경우 반복 횟수는 그리드가 그리드 컨테이너를 오버플로하지 않도록 하는 가능한 가장 큰 양의 정수입니다.

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

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

Effect

auto-fit

자동 맞춤도 자동으로 계산되지만 자동 채우기와 달리 자동 맞춤은 남은 빈 셀을 유지하지 않고 나머지 빈 셀을 자동으로 채웁니다. 셀은 각 셀에 재분배됩니다. 아래 예시를 참고하세요

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

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

Effect

Compatibility

최신 버전의 메인스트림 브라우저는 기본적으로 지원되지만, IE는 아직 지원되지 않습니다.

요약

이 세 가지 그리드 기능은 그리드 레이아웃에 매우 풍부합니다. 이전에는 그리드 레이아웃을 많이 사용하지 않았지만 오늘 이 세 가지 기능과 일부 관련 매개 변수를 배운 후에 그리드 레이아웃도 매우 편리하다는 것을 알게 되었습니다. 나중에 다른 레이아웃과 비교해 보세요.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 당신이 모르는 CSS 그리드 기능!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!