CSS Grid Reture () 함수를 사용하는 방법

이 기사에서는 CSS Grid Reture () 함수의 모든 가능성을 탐색하여 그리드 열과 행의 패턴을 효율적으로 생성하고 미디어 쿼리없이 반응 형 레이아웃을 생성 할 수 있습니다.

. 키 테이크 아웃

`repect ()`함수는 그리드 패턴의 생성을 단순화하여 열이나 행의 수와 그 크기를 간결한 방식으로 사양하여 코드 가독성 및 효율성을 향상시킬 수 있습니다.

. 는 고정 길이 (`px`,`em`,`%`,`fr`), 컨텐츠 기반 키워드 (`min-content`,`max-content`) 및 유연성과 같은 다양한 사이징 옵션을 지원합니다. `auto` 키워드, 반응 형 디자인의 다양성을 제공합니다 이 기능은`auto-fit` 및`auto-fill '키워드와 통합되어 컨테이너 폭에 따라 그리드 트랙의 수를 자동으로 조정할 수 있습니다. `minmax ()````repure () 내에서````` '````'``` '``는 트랙 크기에 대한 범위를 정의하는 강력한 방법을 제공하여 컨텐츠가 다른 뷰포트 크기에 부드럽게 조정되도록합니다. 명명 된 라인은`repure ()`내에서 정의 될 수 있으며 그리드 항목의 정확한 배치를 지원하고 그리드 구조의 유지 관리 가능성을 향상시킬 수 있습니다. `repure ()`자체 안에 중첩 될 수는 없지만 다른 값 및 함수와 함께 사용하여 복잡하고 반응 형 그리드 레이아웃을 효율적으로 생성 할 수 있습니다.

반복하지 마십시오 그리드-템플릿-컬럼과 그리드-템플릿 열 속성을 사용하면 그리드에서 원하는 행과 열의 수를 명시 적으로 설정하고 크기의 크기를 지정할 수 있습니다. 여러 행 및/또는 열의 크기가 같은 방식으로 크기를 조정하려면 반복적이 될 수 있습니다.

반복 () 함수는 우리 자신을 반복하지 않아도 될 수 있습니다. 예를 들어, 우리는 이것을 쓸 수 있습니다 :

대신, 우리는 이것을 쓸 수 있습니다 :
• 위의 예에서, 반복 () 함수를 사용하면 원하는 열 수 (5)와 그 크기가 모두 (1fr- 또는 사용 가능한 공간의 한 부분)를 지정할 수 있습니다.
이것은 우리 코드를보다 효율적이고 읽기 쉽게 만듭니다. 그리고 이것은 단순한 예일뿐입니다. 아래에서 볼 수 있듯이 반복 () 함수로 할 수있는 더 많은 것이 있습니다. <shows> 다음 펜은 위의 코드의 간단한 데모를 보여줍니다. 10 개의 div가 포함 된 기사는 5 개의 열로 구성됩니다. <li> </li> 펜을 참조하십시오 css grid repeat () : sitepoint의 5 개의 간단한 열 (@sitepoint) Codepen에서. <li>위의 데모는 CSS 갭 속성을 사용합니다. 그리드 레이아웃에 대한 자세한 내용은 CSS 그리드에 대한 초보자 안내서를 확인하십시오. 반복 () 함수의 옵션 <repeat> <do> 우리는 실제로 반복 ()의 괄호 안에서 많은 일을 할 수 있습니다. 쉼표로 분리 된 두 가지 주장이 필요합니다. 첫 번째는 "count"를 나타내고, 두 번째는 "트랙"을 나타냅니다. (“트랙”이라는 단어는 열 또는 행의 일반적인 이름입니다.) <p> <ument> 카운트 인수는 세 가지 중 하나 일 수 있습니다 <em> <such> 숫자 (예 : 1, 2, 3) 자동 적합 키워드 자동 필기 키워드 </such></em> <number> 명확하게, 숫자 값은 특정 수의 트랙을 설정합니다. 그러나 Auto-Fit 및 AutoFill은 사용 가능한 공간에 따라 다양한 수의 트랙을 허용합니다. 이것은 미디어 쿼리가없는 반응 형 레이아웃에 매우 편리합니다. 아래에서 자세히 살펴 보겠습니다. </number></ument></p> <arg> 트랙 인수는 반복 될 트랙을 지정합니다. 이것들은이 주장에 대한 옵션입니다 : <h2> </h2> Fr, PX, EM, % 및 CH 와 같은 단위를 사용하는 길이 값 <ont> Min-Content 키워드 <ont> 최대 컨텐츠 키워드 <key key> 자동 키워드 <ax ax> Minmax () 함수는 중첩 된 최소 () 또는 max () 함수를 가질 수 있습니다. <ont> FIT-CONTENT () 함수 <p> 라인 이름 </p> <see> 보시다시피,이 주장에 대한 가능한 많은 옵션이 있으며, 특히 몇몇이 결합 될 때 약간 혼란스러워 보일 수 있습니다. 우리는 잡초에서 길을 잃지 않도록 여기에 상당히 간단하게 유지하려고 노력할 것입니다. 대부분의 상황에서 트랙 인수는 상당히 단순하고 직관적입니다. <p> <column column> reporm () 가있는 열 그룹을 설정합니다 <ore> 반복 ()와 함께 사용할 수있는 다양한 인수를 탐색하기 전에 반복 ()를 열 패턴을 만들 때 사용될 수 있다는 점에 주목할 가치가 있습니다. 예를 들어 <consider> 6 열 그리드에 대한이 "Longhand"코드를 고려하십시오. </consider></ore></column></p> <wr> 우리는 반복 () : 를 사용하여 이것을 다시 작성할 수 있습니다 <ul> <the> 이것은 브라우저에 1fr 너비의 열의 패턴을 3 번 반복하고 2fr 너비의 열을 반복하도록 지시합니다. 아래 데모는 이것을 실제로 보여줍니다. <li> </li> 펜을 참조하십시오 css grid repeat () : sitepoint의 열 패턴 (@sitepoint) Codepen에서. <li> </li> 반복 () 와 함께 길이 값을 사용하는 <with> <seen> 우리는 이미 반복 ()와 함께 사용 된 1fr의 길이 값을 보았습니다. FR 유닛의 장점은 사용 가능한 공간에 대해 걱정하지 않고 사용 가능한 공간에 따라 크기를 추적한다는 것입니다. 그러나 우리는 또한 필요한 곳에 다른 길이 장치를 사용할 수 있습니다. <li> 예를 들어 <let> 3 개의 열 트랙을 설정하고 120 픽셀의 너비를 제공하겠습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ep> 다음 Codepen 데모는 결과를 보여줍니다 <p> 펜을 참조하십시오 css grid repeat () : sitepoint의 길이 값 (@sitepoint) Codepen에서. </p> <p data-default-tab="result" data-height="350" data-slug-hash="WNYLXqe" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <now> 컬럼에는 이제 고정 너비가있어 컨테이너가 너무 좁더라도 변경되지 않습니다. 위의 펜에서 브라우저 너비를 가지고 놀아보십시오. 또한 5EM, 10CH, 15%등과 같은 다른 길이 단위의 픽셀 교체를 시도하여 그 효과를 확인하십시오. 반복 () 와 함께 최소 컨텐츠 키워드를 사용합니다 <ont> Min-Content 키워드는 트랙을 최소 콘텐츠만큼 넓거나 키로 설정합니다. 아래 데모에는 세 개의 열이 있으며 각 열은 최소 컨텐츠로 설정되어 있으므로 각 열에는 가장 긴 단어가 포함되어 있습니다. </ont></now></p> <!-- demo2 --> 펜을 참조하십시오 css grid repeat () : sitepoint by sitepoint (@sitepoint) Codepen에서. <p> </p> Max-Content 키워드를 사용하여 반복 () <ont> 최대 컨텐츠 키워드는 기본적으로 Min-Content와 반대입니다. 그리드 셀에서 가장 큰 컨텐츠의 트랙 크기를 기반으로합니다. 아래 데모에서 열 너비는 컨텐츠가 가장 큰 셀을 기반으로합니다. <h2> </h2> 펜을 참조하십시오 CSS Grid Repeat () : sitepoint의 Max-Content (@sitepoint) Codepen에서. <p> </p> <o o> 반복 ()로 자동 키워드를 사용합니다 () <repeat> 반복 ()와 함께 사용하면 자동 키워드는 최대 컨텐츠에서 최대를 받고 Min-Content에서는 Mins가 나옵니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;grid-template-columns: repeat(5, 1fr); &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <pattern> 다음 열의 패턴을 고려하십시오 <p data-default-tab="result" data-height="350" data-slug-hash="ExOGbBm" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <ll> 여기, 우리는 6 개의 열이 있으며 각 홀수는 자동차의 너비로 설정됩니다. 아래의 코피 펜 데모에서는 충분한 공간이있는 곳에 "자동"텍스트가있는 DIV가 최대 콘텐츠에서 최대가 있고 1FR DIV는 나머지 공간을 공유하는 것을 볼 수 있습니다. 브라우저가 좁아지면서 자동 열은 최소 콘텐츠 임계 값에 도달 할 때까지 계속 좁아집니다. </ll></p> 펜을 참조하십시오 CSS Grid Repeat () : Sitepoint (@SitePoint)에 의한 자동 Codepen에서. <!-- demo3 --><!-- demo5 --> <o> 위의 데모에서, div는 각 열이 최소 컨텐츠 임계 값에 도달하면 컨테이너를 오버플로 시작합니다. (즉, 텍스트는 더 이상 포장 할 수 없습니다.) <p> 참고 : 자동은 다른 값과 혼합 될 때 위에서 설명한대로 작동하는 것 같습니다. 반복 (3, 자동)과 같은 자체적으로 우리가 반복 (3, 1fr)을 설정하는 것처럼 동작합니다. <m m> 반복 () 와 함께 minmax () 함수를 사용합니다 <ax> minmax () 함수는 쉼표로 분리 된 최소 및 최대 값의 두 가지 인수를 취합니다. 따라서 minmax ()를 사용하면 유연한 환경에서 트랙에 가능한 다양한 크기를 설정할 수 있습니다. 예를 들어, <we>는 열을 Minmax (40px, 100px)로 설정할 수 있습니다. 즉, 최소 가능한 폭은 40px이고 가능한 최대 너비는 100px입니다. MinMax ()의 두 인수는 FR, PX, EM, % 및 CH와 같은 길이 값뿐만 아니라 최소 컨텐츠, 최대 콘텐츠 및 자동차를 취할 수 있습니다. 그러나 키워드가 두 인수로 작동하지 않기 때문에 적어도 하나의 인수에 대해 길이 값을 사용하는 것이 가장 좋습니다 (Minmax (Min-Content, Max-Content)와 같이 때때로 작동하지만). </we></ax></m></p> <set> 다음 코드는 5 개의 열을 설정하며, 각 열은 최소 60px이고 최대 너비는 1fr : 입니다. <p> <em> 펜을 참조하십시오 css grid report () : sitepoint의 minmax () (@sitepoint) Codepen에서. </em> </p> <until> 이것은 60px의 최소 너비에 도달 할 때까지 잘 작동합니다. 그 시점 후, 콘텐츠는 컨테이너에서 매달리기 시작합니다. 곧 더 나은 결과를 얻는 방법을 살펴 보겠습니다. <h2> minmax () 함수를 사용하여 min () 또는 max () minmax () 함수는 또한 min () 또는 max () 함수를 인수로 가질 수 있습니다. 둘 다 두 가지 값을 가져옵니다. 최소 () 함수는 두 값 중 작은 값을 적용하고 Max () 함수는 더 큰 값을 적용합니다. 이것은 반응 형 환경에서 유용합니다. </h2> 예를 들면 : <p> </p> 펜을 참조하십시오 css grid repore () : sitepoint (@sitepoint)에 의해 min ()가있는 minmax () 함수 Codepen에서. <p> </p> 위의 코드는 5 개의 열을 설정합니다. 넓은 브라우저에서 5 개의 열은 모두 1FR에서 동일하게 간격을 두는 것입니다. 더 좁은 장치에서는 기둥이 좁아지고 좁아집니다. 60px와 8VW의 낮은 곳을 때리면 수축을 멈출 것입니다. 따라서 우리는 여전히 좁은 화면에 컨테이너에 매달려있는 콘텐츠를 찾을 수 있습니다. 완전히 반응하는 것이 더 있습니다. <p><the>이 단계에서 minmax (), min () 및 max ()의 조합을 약간 압도적으로 발견하면 자동 피팅과 자동으로 만날 때 실제 전력이 아래에서 볼 수 있으므로 거기에 매달려 있습니다. 채우십시오. <.> 반복 () 를 사용하여 fit-content () 함수 사용 <ont> FIT-CONTENT () 함수는 단일 인수를 취하며 트랙이 자라는 최대 크기를 나타냅니다. 따라서 트랙은 그 시점까지 <p>가 유연 할 수 있습니다. FIT-Content ()는 FR, PX, EM, % 및 ch. 와 같은 길이 값을 취할 수 있습니다. 예를 들어 <if> 세 개의 열과 피트 콘텐츠 (120px)를 설정하면 열 너비가 120px의 너비까지 반응합니다 : . <h2> </h2> 펜을 참조하십시오 css grid report () : sitepoint의 fit-content () (@sitepoint) Codepen에서. <p> <em> 반복 () 가있는 명명 된 선을 사용합니다 그리드 레이아웃에서 <lay> 트랙 주변의 수직 및 수평선은 기본적으로 번호가 매겨집니다. 그리드 테마 플레이트-컬럼과 그리드-템플릿 줄을 설정할 때 해당 라인에 이름을 줄 수 있습니다. 이렇게하면 그리드에 컨텐츠를 배치 할 때 해당 라인을 쉽게 타겟팅 할 수 있습니다 (그리드 라인에 들어가서 계산할 필요가 없으므로). <simple> 다음은 간단한 예입니다. 명명 된 선은 사각형 브래킷의 비트 ([])입니다. </simple></lay></em></p> <gives> 위의 코드는 두 개의 열을 제공합니다. 왼쪽에서 가장 왼쪽 수직 그리드 라인 (번호 1)을 "사이드 바"라고하며 중간 그리드 라인 (번호 2)을 "콘텐츠 시작"이라고하며 최종 그리드 라인 (번호 3)을 "컨텐츠 엔드"라고합니다. <p> <used> 우리는 또한 반복 () 함수 내에서 명명 된 선을 사용할 수 있습니다 : </used></p> <each> 이것은 우리의 각 열에 이제 각 열에 Yin이라는 왼쪽에 선이 있고 Yang이라는 오른쪽에 선이 있음을 의미합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p data-default-tab="result" data-height="350" data-slug-hash="ZEmVvEp" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> </p> <to> 각 선이 동일한 이름을 가지고 있다면 인생이 더 어려워 보일 수 있지만, 우리는 여전히 개별적으로 목표를 목표로 할 수 있습니다. 예를 들면 : <!-- demo8 --> <h2> <the> 우리는 그리드-컬럼과 함께 첫 번째 음선을 타겟팅 할 수 있습니다. <the> 우리는 그리드-컬럼과 함께 두 번째 음인을 타겟팅 할 수 있습니다. <a> 우리는 두 번째 음인에서 세 행을 파악하기 위해 열을 설정할 수 있습니다 : Grid-Column : Yin 2 / Span 3 </a></the></the> </h2>> <a> 우리는 그리드 -컬럼으로 두 번째 음, 끝까지 열을 설정할 수 있습니다 : 음 2 / 양 -1 </a></to></each></gives></if></p> 반복 () 내의 이름 지정 라인은 반복 ()가 다른 값과 혼합되는 곳에서 가장 유용 할 것입니다. <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;grid-template-columns: repeat(5, 1fr); &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <del> 나는 별도의 주제이기 때문에 명명 된 라인과 여기에서 사용하는 방법을 더 많이 탐구하지는 않지만 MDN의 이름의 그리드 라인에 대해 자세히 읽을 수 있습니다.자동 피팅 및 자동 필과 함께 repect ()를 사용하는 자동 피팅 및 자동 필기 키워드는 고정 된 수의 트랙을 설정하는 대안입니다. 그들은 브라우저에 가능한 한 주어진 공간에 많은 트랙을 맞추라고 말합니다. 예를 들면 : <p> </p> 펜을 참조하십시오 CSS Grid Repeat () : SitePoint의 자동 피팅 및 자동 필 (@SitePoint) Codepen에서. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p data-default-tab="result" data-height="350" data-slug-hash="bGQOaGX" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <o> 위의 데모에서 DIV는 너비 150px로 설정되고 한 줄에 적합 할 수없는 다음은 다음으로 떨어집니다. 자동 피팅을 자동 필로 변경하면 차이가 보이지 않을 것입니다. 이러한 조건에서도 모두 같은 일을하기 때문입니다. 그들 사이의 차이는 특별한 상황에서만 분명해집니다. </o></p> 이 시점에서 자동 필기 자동 고정 장치는 <!-- demo10 --> 좋아 이지만 특히 플래시는 없습니다. 그들이 Minmax () 및 min ()과 결합되어 진짜 마법이 일어나기 시작할 때 다음을 살펴 보겠습니다. . auto-fit/auto-fill, minmax () 및 min () 반복 ()과 사랑에 빠지지 않으면 반복 ()의 자동 피팅, minmax () 및 min ()의 조합은 Cupid의 화살이 완고한 마음을 피할 것입니다. 그들의 조합은 미디어 쿼리를 사용하지 않고 진정으로 반응 형 레이아웃을 만들 수 있습니다. auto-fit 및 minmax ()를 사용하여 repure () <c> 다음 CSS를 고려하십시오 </c></del></ont></.></the></p> 이 예에서 MinMax ()는 200px의 최소 열 너비와 최대 1FR을 설정합니다. 아래 데모는 이것을 실제로 보여줍니다. <p> <em> 펜을 참조하십시오 css grid repeat () : sitepoint의 자동 결제 및 minmax () (@sitepoint) Codepen에서. </em> </p> <be> 각 DIV의 너비는 200px 이상이어야합니다. 오른쪽에 여분의 공간이있는 경우 (200 픽셀 미만) DIV는 공간을 채우도록 확장됩니다. 브라우저를 넓히면 200 픽셀의 공간을 사용할 수있는 다른 DIV가 행에 추가됩니다. 브라우저가 좁아지면 200px 이상의 공간이 없으면 행의 마지막 div가 떨어질 것입니다. 그리고 일단 떨어지면 나머지 divs가 줄을 채우기 위해 확장됩니다. <h2> <we> 다시, 자동 고정 장치를 자동 필기로 바꾸면 동일한 동작이 나타납니다. </we> </h2> <lim>이 예에는 한 가지 제한이 있습니다. 브라우저 창을 충분히 좁히면 단일 열로 끝납니다. 이 열이 200px보다 좁아지면 DIV는 컨테이너가 오버플로 시작됩니다. <p> </p> <h3><this> 우리는 min ()을 믹스에 가져와이 오버플로가 발생하는 것을 방지 할 수 있으므로 다음에 살펴 보겠습니다. Auto-Fit 사용, minmax () 및 min ()을 사용하여 반복 () <what> 우리는 최소 ()를 도입하여 작은 너비에서 발생하는 일을 제어 할 수 있습니다. 코드를 다음과 같이 보이도록 업데이트합시다 <p> <two> 이제 최소 열 너비에 대한 두 가지 옵션이 있습니다. 브라우저는 </two></p>를 선택합니다. 열이 200px보다 좁은 후에는 100%가 더 작은 값이므로 우세합니다. 이는 단일 나머지 열이 이제 너비로 설정되어 100%로 설정되므로 폭이 감소 할 때 컨테이너에 계속 잘 맞습니다. (실제로 브라우저 창을 실제로 볼 수있는 한 아래로 짜십시오.) <h3> </h3> 펜을 참조하십시오 css grid repeat () : minmax () 및 min () by sitepoint (@sitepoint) Codepen에서. <p> </p> <real> auto-fit, minmax () 및 min ()과 함께 반복 ()을 사용하는보다 실제적인 데모의 경우 반응 형 이미지 갤러리의 다음 코드 페펜 데모를 확인하십시오. 이 데모는 또한 CSS 종횡비를 사용하는 방법을 다루는 종횡비 속성을 사용합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;grid-template-columns: 1fr 1fr 1fr 1fr 1fr; &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 펜을 참조하십시오 SitePoint (@SitePoint)의 STAPER-RATIO를 사용한 응답 이미지 갤러리 Codepen에서. <p> <between> 자동 피팅과 자동 필의 차이를 이해합니다 <ples> 우리가 지금까지 본 예에서는 자동 피팅과 자동 필기 사이에 차이가없는 것으로 보입니다. 차이는 특정 상황에서만 나타나며, 지금 간단히 다룰 것입니다. <em> <our> 우리는 4 개의 div 만 있도록 데모 html을 줄이고 다음 css를 설정합니다. </our></em> <shows> 아래 이미지는 자동 필로 얻은 내용을 보여줍니다 </shows></ples></between></p> <p data-default-tab="result" data-height="350" data-slug-hash="eYQbyNg" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <er> 브라우저는 컨테이너에 얼마나 많은 divs가 적합 할 수 있는지 계산하고 그들을위한 공간을 남기고 있습니다. 기존의 각 div는 폭이 110px입니다. 오른쪽에 왼쪽 공간이 있습니다. <to> 자동 피팅으로 전환하겠습니다 : </to></er></p> <shows> 아래 이미지는 자동 피팅으로 얻는 내용을 보여줍니다 <!-- demo12 --> <p> 자동 피팅을 사용하면 브라우저는 더 많은 DIV를위한 공간을 계산하지만 그 공간을 0으로 낮추고 기존 DIV가 모든 공간을 차지하도록 확장 할 수 있도록합니다. 위의 이미지에서, 끝 열 선이 여전히 번호 8입니다. 8은 그리드 선 7, 6 및 5 위에 쌓입니다.<we> 그래서 우리는이 모든 것을 무엇을 만들어야합니까? 현실적으로, 대부분의 상황에서는 모든 상황이 아닌 경우 자동 피팅을 사용하고 싶을 것입니다. 콘텐츠에 사용할 수있을 때 공간이 비어 있기를 종종 비워두기를 원하지 않기 때문입니다. <around>이 코피 펜 데모에서 자동 피팅 및 자동 필로 연주 할 수 있습니다. 자동 고정 장치를 자동 필기로 변경하고 브라우저를 넓히고 계약하여 둘 다 어떻게 행동하는지 확인하십시오. <p>. <know> 반복 ()에 대해 알아야 할 유용한 것들 () 위에서 언급 한 바와 같이, 반복 () 함수는 그리드-템플릿-컬럼 및 그리드-템플릿 열이있는 더 긴 선언의 일부로 사용할 수 있습니다. 우리가 여기서 만난 대부분의 친구 (길이 단위, Min-Content, Max-Content, Auto, Minmax (), Fit-Content () 및 명명 된 라인은 반복 ()과 함께 작동합니다. (Mdn에서 그리드 테마 플레이트-컬럼 및 그리드 테드 플레이트 열을 사용하는 예를 볼 수 있습니다.) <ations> 트랙 인수에는 일부 조합이 허용되지 않습니다. 예를 들어, 반복 (자동 필, 1FR)과 같은 것을 사용할 수 없습니다. Minmax (100px, 1fr)와 같은 어딘가에 고정 된 측정이 필요하기 때문에 자동 적합 및 유연한 장치는 함께 플레이 할 수 없습니다. 우리가 본 바와 같이, MinMax () 함수는 중첩 된 최소 () 또는 max () 함수를 가질 수 있습니다. 또한 자동, 최소 컨텐츠, 최대 콘텐츠 중 하나를 포함 할 수도 있지만 2 개는 포함될 수 있습니다. 예를 들어, 우리는 Minmax (50px, max-content)를 사용할 수 있지만 Minmax (Min-Content, Max-Content)는 사용할 수 없습니다 (솔직히 말해서, 나는 이러한 조합 중 일부가 를 발견했습니다. 어쨌든 작동하는 것 같습니다). </ations></know></p> 반복 () 표기법은 중첩 될 수 없습니다. 따라서 반복 () 내에 반복 ()을 가질 수 없습니다. 그러나 반복 (5, 1fr) 100px 반복 (2, 50px)과 같은 반복 () 기능을 나란히 가질 수 있습니다. 포장 <p> 반복 () 함수는 그리드 열과 행의 반복 패턴을 효율적으로 배치하는 데 매우 유용한 도구입니다. 단일 줄의 코드로 미디어 쿼리없이 완전히 반응 형 레이아웃을 만드는 데 사용될 수 있습니다. 대부분의 경우 반복 ()로 잡초에 너무 멀리 떨어질 필요가 없습니다. 가장 인상적인 기능은 다음과 같은 기본 예에서 요약됩니다. </p> <keep> 매우 편리 할 것이므로 해당 코드 라인을 뒷주머니에 보관하십시오. <h2> <more> 반복 () 함수에 대해 자세히 알아볼 수 있습니다 </more> </h2> mdn 의 반복 () 페이지 W3C 그리드 레이아웃 모듈 사양의 반복 () 섹션 <p> CSS 그리드 레이아웃에 대한보다 일반적인 소개는 CSS 그리드 레이아웃 소개를 참조하십시오.<questions> CSS 그리드 반복 함수 에 대한 자주 묻는 질문 (FAQ) <difference> 반복 함수 사용과 CSS 그리드의 그리드 트랙을 수동으로 지정하는 것의 차이점은 무엇입니까? <h2> CSS 그리드의 반복 기능은 동일한 크기의 여러 그리드 트랙을 정의하는 속기 방법입니다. 각 트랙을 수동으로 지정하는 대신 반복 기능을 사용하여 트랙 수와 크기를 한 번에 정의 할 수 있습니다. 이로 인해 코드를 더 깨끗하고 읽기 쉽게 만듭니다. 예를 들어,“그리드-템플릿-컬럼 : 100px 100px 100px 100px”를 작성하는 대신“그리드-테일 플레이트-컬럼 : 반복 (4, 100px);”를 작성할 수 있습니다. 두 코드 모두 100px 너비 각각 4 개의 열이있는 그리드를 생성합니다. </h2> 다른 트랙 크기로 반복 기능을 사용할 수 있습니까? <h3> 예, 다른 트랙 크기로 반복 기능을 사용할 수 있습니다. 반복 함수는 두 가지 인수, 즉 반복 수와 트랙 크기를 받아들입니다. 크기가 다른 트랙으로 그리드를 만들려면 동일한 속성에서 여러 번 반복 기능을 사용할 수 있습니다. 예를 들어, "Grid-Template-Columns : Retur (2, 100px) 반복 (3, 200px);" 100px의 두 열과 200px의 3 개의 열이있는 그리드를 만듭니다. </h3> 자동 필기 키워드는 반복 기능과 어떻게 작동합니까? <p> 자동 필기 키워드는 반복과 함께 사용됩니다. 기능 그리드 컨테이너를 자동으로 적용 할 수있는 한 트랙으로 자동으로 채우십시오. 트랙의 크기는 반복 함수의 두 번째 인수로 지정됩니다. 컨테이너 크기가 트랙의 총 크기를 초과하면 나머지 공간은 트랙에 똑같이 분포됩니다. 예를 들어, "Grid-Template-Columns : Retur (자동 필, 100px);" 컨테이너에 맞는만큼 많은 100px 열을 생성합니다. </p> 분수 단위 (FR)와 함께 반복 함수를 사용할 수 있습니까? <h3> 예, 반복 기능은 분수 단위와 함께 사용할 수 있습니다 ( 정말로). FR 장치는 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다. 예를 들어, "Grid-Template-Columns : Repeat (3, 1fr);" 컨테이너 너비의 3 분의 1을 차지하는 세 개의 열이있는 그리드를 만듭니다. </h3> 자동 적합 키워드는 반복 함수와 어떻게 작동합니까? <p> </p> 자동 맞춤 키워드가 사용됩니다. 반복 기능으로 반응 형 그리드 레이아웃을 생성합니다. 자동 필과 유사하게 작동하지만 빈 트랙이 무너집니다. 즉, 모든 트랙을 채우는 콘텐츠가 충분하지 않으면 나머지 트랙이 사용 가능한 공간을 차지할 수 있습니다. 예를 들어, "Grid-Template-Columns : Retur (Auto-Fit, Minmax (100px, 1fr));" 컨테이너에 맞는만큼 100px 열을 생성하고 남은 공간이 열에 분포됩니다.<the> minmax 함수와 함께 반복 함수를 사용할 수 있습니까? <h3> 예, 반복 함수는 Minmax 함수와 함께 사용할 수 있습니다. Minmax 함수는 최소값보다 크고 동일한 크기 범위를 정의합니다. 예를 들어, "Grid-Template-Columns : repeat (3, minmax (100px, 1fr));" 최소 너비가 100px이고 최대 너비가 1fr의 3 개의 열이있는 그리드를 만듭니다. </h3> 반복 기능을 음수로 사용하면 어떻게됩니까? 음수 인 반복 함수, 브라우저는 규칙을 무시하고 그리드가 생성되지 않습니다. 반복 함수는 긍정적 인 정수를 반복 횟수로 만 허용합니다. <p> 백분율 값으로 반복 함수를 사용할 수 있습니까? </p> 예, 백분율 값으로 반복 함수를 사용할 수 있습니다. 백분율은 그리드 컨테이너의 크기와 관련하여 계산됩니다. 예를 들어, "Grid-Template-Columns : Repeat (2, 50%);" 컨테이너 너비의 절반을 차지하는 두 개의 열이있는 그리드를 생성합니다. <h3> 그리드 테마 플레이트 열 속성과 함께 반복 기능을 사용할 수 있습니까? 그리드 줄의 크기를 정의하기 위해 그리드-템플릿 행 속성과 함께 사용하십시오. 구문은 그리드 테일 플레이트 컬럼과 동일합니다. 예를 들어, "Grid-Template-rows : repeat (3, 100px);" 100px 높이의 각각 3 개의 행으로 그리드를 생성합니다. </h3> 미디어 쿼리와 함께 반복 기능을 사용할 수 있습니까? <p> 예, 반복 기능을 미디어 쿼리와 함께 사용하여 반응 형 그리드 레이아웃을 만들 수 있습니다. . 미디어 쿼리 내부의 반복 기능을 사용하여 다른 화면 크기의 다른 그리드 레이아웃을 정의 할 수 있습니다. 예를 들어, 작은 화면에 두 개의 열과 큰 화면에 4 개의 열을 표시 할 수 있습니다. 이것은 다음 코드로 달성 할 수 있습니다 : .grid {> grid-template-columns : repeat (2, 1fr); </p>} <h3>} </h3>> @Media (min-width : 601px) { .grid { grid-template-columns : repeat (4, 1fr); <p>} </p>} </the></difference></questions></p></keep></around></we></p></shows></real></what></this></h3></lim></be></until></set></o></pattern></repeat></o></ont></ep></let> </li></seen></with></the> </ul></wr></see></ont></ax></key></ont></ont></arg></do></repeat> </li></shows>

위 내용은 CSS Grid Reture () 함수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!