CSS 그리드 래핑?

Programing

CSS 그리드 래핑?

lottogame 2020. 10. 19. 07:34

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-fill또는 중 하나를 표기법 auto-fit의 반복 번호로 사용하십시오 repeat().

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

`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 개의 항목 만 있으므로 나머지 공간에 다섯 번째 항목이 빈 트랙으로 생성됩니다.

나머지 공간 인 트랙 # 6은 명시 적 그리드를 끝냅니다. 이것은 다른 트랙을 배치하기에 충분한 공간이 없음을 의미합니다.

`auto-fit`

auto-fit키워드와 동일하게 동작 auto-fill후 것을 제외하고, 그리드 항목 배치 알고리즘 나머지 공간 내에서 빈 트랙에 붕괴 될 것이다 0.

.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` vs `auto-fit`

이 둘의 차이점은 minmax()함수를 사용할 때 눈에 .니다.

그리드 컨테이너에서 남은 공간의 일부 를 더하기 minmax(186px, 1fr)위해 항목 범위를 지정하는 데 사용 합니다 .186px186px

를 사용할 때 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>

운동장:

CodePen

자동 채우기 트랙 검사

자동 맞춤 트랙 검사

함수 내부 auto-fit또는 중 하나를 원합니다 .auto-fillrepeat()

grid-template-columns: repeat(auto-fit, 186px);

minmax()유연한 열 크기를 허용하기 위해 a 를 사용하는 경우 두 가지의 차이점이 분명해집니다 .

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

이를 통해 186px에서 컨테이너의 전체 너비에 걸쳐 펼쳐지는 동일한 너비의 열에 이르기까지 열의 크기를 조정할 수 있습니다. auto-fill너비에 맞는만큼의 열을 생성합니다. 예를 들어, 그리드 항목이 4 개만 있더라도 5 개의 열이 맞으면 다섯 번째 빈 열이 있습니다.

Using auto-fit instead will prevent empty columns, stretching yours further if necessary:

are you looking for auto-fill?

grid-template-columns: repeat(auto-fill, 186px);

Demo: http://codepen.io/alanbuchanan/pen/wJRMox

To use up the available space more efficiently, you could use minmax, and pass in auto as the second argument:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Demo: http://codepen.io/alanbuchanan/pen/jBXWLR

If you don't want the empty columns, you could use auto-fit instead of auto-fill.

I had a similar situation. On top of what you did, I wanted to center my columns in the container while not allowing empty columns to for them left or right:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

Here's my attempt. Excuse the fluff, I was feeling extra creative.

내 방법은 고정 치수를div 가진 부모 입니다 . 나머지는 그에 따라 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' 카테고리의 다른 글

Entity Framework가 항상 데이터베이스에서 업데이트 된 데이터를 가져 오도록 강제하는 방법은 무엇입니까? (0)	2020.10.19
Kubernetes 예약 작업을 수동으로 트리거하려면 어떻게해야합니까? (0)	2020.10.19
다른 응용 프로그램 서명으로 인해 재설치에 실패했습니다. (0)	2020.10.19
수퍼 뷰의 수퍼 뷰와 관련하여 UIView의 위치를 가져옵니다. (0)	2020.10.18
레이아웃을 아래로 스크롤하려면 어떻게해야합니까? (0)	2020.10.18

현재글CSS 그리드 래핑?

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

무비순위, 놀거리, c#, 극장순위, 행사, java, 뮤지컬, 축제, 볼거리, JQuery, 여행, c++, spring, Spring3, 자바, 공연, Javascript, 가족나들이, 연극, 관광,

Today :
Yesterday :

lottogame

CSS 그리드 래핑?

CSS 그리드 래핑?

`auto-fill`

`auto-fit`

`auto-fill` vs `auto-fit`

CodePen

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
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

CSS 그리드 래핑?

CSS 그리드 래핑?

auto-fill

auto-fit

auto-fill vs auto-fit

CodePen

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바

`auto-fill`

`auto-fit`

`auto-fill` vs `auto-fit`