CSS 그리드 래핑
미디어 쿼리를 사용하지 않고 CSS 그리드 랩을 만들 수 있습니까?
제 경우, 그리드에 배치할 항목의 수가 결정적이지 않으므로 그리드를 랩으로 감아야 합니다.Flexbox를 사용하면 안정적으로 공간을 확보할 수 없습니다.저는 언론의 질문도 많이 피하고 싶습니다.
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>그리고 여기 GIF 이미지가 있습니다.
참고로, 만약 누군가가 제가 가지고 있는 것처럼 모든 항목의 너비를 지정하지 않을 수 있는 방법을 알려줄 수 있다면,grid-template-columns그래주시면 좋겠어요.저는 아이들이 자신의 너비를 지정하기를 선호합니다.
또는 표기법의 첫 번째 인수로 사용합니다.
<auto-repeat> 의 변종repeat()표기법:
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
auto-fill
언제
auto-fill는 반복 번호로 제공됩니다. 그리드 컨테이너가 관련 축에서 확실한 크기 또는 최대 크기를 가질 경우, 반복 횟수는 그리드 컨테이너가 오버플로하지 않도록 하는 최대의 양의 정수입니다.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>그리드는 컨테이너를 오버플로우하지 않고 가능한 한 많은 트랙을 반복합니다.
이 경우 위의 예(이미지 참조)에서 5개 트랙만 그리드 컨테이너에 오버플로 없이 장착할 수 있습니다.우리 그리드에는 4개의 항목만 있으므로 나머지 공간 내에 5번째 항목이 빈 트랙으로 생성됩니다.
나머지 공간인 트랙 #6은 명시적 그리드를 종료합니다.이것은 다른 트랙을 배치할 공간이 충분하지 않았다는 것을 의미합니다.
auto-fit
그
auto-fit키워드는 다음과 같이 동작합니다.auto-fill단, 그리드 항목 배치 후 빈 반복 트랙이 모두 축소됩니다.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>그리드는 컨테이너를 오버플로우하지 않고 가능한 한 많은 트랙을 반복하지만 빈 트랙은 다음과 같이 축소됩니다.0.
붕괴된 트랙은 다음과 같은 고정된 트랙 사이징 기능을 갖는 것으로 처리됩니다.0px.
과는 달리auto-fill이미지 예: 빈 다섯 번째 트랙이 축소되어 네 번째 항목 바로 뒤에 명시적 그리드가 종료됩니다.
auto-fill대auto-fit
기능을 사용할 때 둘 사이의 차이가 눈에 띕니다.
사용하다minmax(186px, 1fr)품목의 범위를 정하다186px그리드 컨테이너의 남은 공간의 일부로.
을 할 때auto-fill빈 트랙을 배치할 공간이 없으면 항목이 증가합니다.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>을 할 때auto-fit모든 빈 트랙이 접히기 때문에 남은 공간을 채우기 위해 항목이 증가합니다.0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>놀이터:
코드펜
자동 채우기 트랙 검사 중
자동 장착 트랙 검사
둘 중 하나를 원합니다.auto-fit또는auto-fill에의 에.repeat()함수:
grid-template-columns: repeat(auto-fit, 186px);
만약 당신이 또한 사용한다면 둘 사이의 차이는 명백해집니다.minmax()유연한 열 크기를 허용하는 방법:
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
이렇게 하면 용기의 전체 너비에 걸쳐 확장된 186픽셀에서 동일한 너비의 열까지 열 크기를 조정할 수 있습니다.auto-fill너비에 맞는 만큼의 열을 만듭니다.예를 들어, 다섯 개의 열이 적합한 경우 그리드 항목이 네 개뿐인데도 다섯 번째 열이 비어 있습니다.
용사를 합니다.auto-fit대신 빈 열을 방지하고 필요한 경우 추가로 열을 늘립니다.
찾실수있다니습으를 찾고 입니다.auto-fill:
grid-template-columns: repeat(auto-fill, 186px);
데모: http://codepen.io/alanbuchanan/pen/wJRMox
을 더는 사가능공보간효다로사으다다사수있니습용음할을면용용려를 사용할 수 있습니다.minmax을 전달합니다.auto 두번째 로 지정합니다.
grid-template-columns: repeat(auto-fill, minmax(186px, auto));
데모: http://codepen.io/alanbuchanan/pen/jBXWLR
여러분이 칸을, 은 빈열원않경다사수있다니습용을 할 수 .auto-fit에 auto-fill.
저도 비슷한 상황이 있었습니다.사용자가 수행한 작업 외에도 빈 열을 왼쪽 또는 오른쪽으로 허용하지 않고 열을 컨테이너에 중앙에 배치하고 싶었습니다.
.grid {
display: grid;
grid-gap: 10px;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
제 시도는 이렇습니다.제가 좀 더 창의적이라고 느꼈거든요
입니다.div 일정한 치수로나머지는 단지 그 디비 안에 있는 내용을 그에 맞게 맞추는 것입니다.
이렇게 하면 가로 세로 비율에 관계없이 이미지의 크기가 조정됩니다.경작도 없을 것입니다.
body {
background: #131418;
text-align: center;
margin: 0 auto;
}
.my-image-parent {
display: inline-block;
width: 300px;
height: 300px;
line-height: 300px; /* Should match your div height */
text-align: center;
font-size: 0;
}
/* Start demonstration background fluff */
.bg1 {background: url(https://unsplash.it/801/799);}
.bg2 {background: url(https://unsplash.it/799/800);}
.bg3 {background: url(https://unsplash.it/800/799);}
.bg4 {background: url(https://unsplash.it/801/801);}
.bg5 {background: url(https://unsplash.it/802/800);}
.bg6 {background: url(https://unsplash.it/800/802);}
.bg7 {background: url(https://unsplash.it/802/802);}
.bg8 {background: url(https://unsplash.it/803/800);}
.bg9 {background: url(https://unsplash.it/800/803);}
.bg10 {background: url(https://unsplash.it/803/803);}
.bg11 {background: url(https://unsplash.it/803/799);}
.bg12 {background: url(https://unsplash.it/799/803);}
.bg13 {background: url(https://unsplash.it/806/799);}
.bg14 {background: url(https://unsplash.it/805/799);}
.bg15 {background: url(https://unsplash.it/798/804);}
.bg16 {background: url(https://unsplash.it/804/799);}
.bg17 {background: url(https://unsplash.it/804/804);}
.bg18 {background: url(https://unsplash.it/799/804);}
.bg19 {background: url(https://unsplash.it/798/803);}
.bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg4"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg5"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg6"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg7"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg8"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg9"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg10"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg11"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg12"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg13"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg14"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg15"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg16"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg17"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg18"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg19"></div>
</div>
<div class="my-image-parent">
<div class="my-image bg20"></div>
</div>언급URL : https://stackoverflow.com/questions/43129360/css-grid-wrapping
'programing' 카테고리의 다른 글
| jQuery: 특정 ID를 제외한 지정된 클래스의 모든 요소 선택 (0) | 2023.08.06 |
|---|---|
| 역할 ASP에 사용자 추가.NET 아이덴티티 (0) | 2023.08.06 |
| Node.js에서 비차단 또는 비동기 I/O란 무엇입니까? (0) | 2023.08.06 |
| 포스트백이란 무엇입니까? (0) | 2023.08.06 |
| 어떻게 CSS가 (자바스크립트가 아닌) 문자열로 시작하는 ID를 선택하도록 합니까? (0) | 2023.08.06 |