홈>
임의의
grid-template-columns
를 표시해야합니다
.
나는
grid-template-columns: repeat(auto-fill, 100px)
를 시도했다
, 그러나 이것은 부모의 너비를 초과하는 행을 모두 래핑합니다.
grid-template-columns: repeat(999, 100px)
와 같은 큰 상한 설정
작동하지만 더 좋은 방법이 있어야합니다.
다음은 내가 작업하고있는 작업의 예입니다. https://codepen.io/anon/pen/BJbvEG
.grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
width: 300px;
border: 1px solid #000;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(999, 100px);
width: 300px;
border: 1px solid #000;
overflow: auto;
}
.column {
display: grid;
grid-template-rows: repeat(12, 1fr);
}
<h3>Auto-fill takes an arbitrary number, but wraps. </h3>
<div class="grid-1">
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
</div>
<h3>A large upper bound works, but I'm looking for a better way.</h3>
<div class="grid-2">
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
</div>
- 답변 # 1
- 답변 # 2
flexbox로 그렇게 할 수 있습니다. flex-item을 무 성장, 비 수축, 고정 너비 요소로 설정하십시오
.grid-1 { display: flex; width: 300px; border: 1px solid #000; overflow:auto; } .column { flex: 0 0 100px; }
<div class="grid-1"> <div class="column"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div><div>six</div><div>seven</div> <div>eight</div> <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div> </div> <div class="column"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div><div>six</div><div>seven</div> <div>eight</div> <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div> </div> <div class="column"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div><div>six</div><div>seven</div> <div>eight</div> <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div> </div> <div class="column"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div><div>six</div><div>seven</div> <div>eight</div> <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div> </div> </div>
관련 자료
- 배열 PHP의 열 수를 계산합니까?
- java - 각 클래스의 요소 수만 사용하여 대체하지 않고 샘플링하는 방법은 무엇입니까?
- Flutter에서 Column의 자식을 컨테이너의 하단에 정렬하는 방법
- javascript - 루핑없이 JSON 행 열 제거
- python - Pandas의 열에서 다음 번호 선택
- sql - NULL을 표시하지 않고 테이블의 두 열 합계
- python - Pandas 피벗 테이블에서 열 수와 각 열의 너비를 얻는 방법은 무엇입니까?
- 동적 수의 열과 행이있는 시계열 데이터를 적절한 데이터베이스에 저장
- function - 수식을 다시 입력하지 않고 Excel에서 텍스트 번호를 자동으로 변경하는 방법은 무엇입니까?
- python 3.x - 각 열에 대한 사전을 만들지 않고 데이터 프레임의 모든 열에 대해 str을 int로 대체
- recursion - C ++에서 다양한 컨테이너 유형 임의 중첩 반복 가능 생성기 함수 구현
- html - 그리드 시스템 레이아웃을 잃지 않고 열 사이에 공백 추가
- javascript - 중복없이 임의의 수의 객체 배열을 병합하는 방법은 무엇입니까?
- css - 그리드를 손상시키지 않고 Vuetify의 열 사이에 스페이서를 추가하는 방법은 무엇입니까?
- python - EOF 오류없이 알 수없는 수의 입력 가져 오기
- arrays - 숫자를 건너 뛰지 않는 Python 순위 (밀집 순위)
- apache spark - pyspark - 여러 열을 숫자로 캐스팅
- c - 2D 배열없이 파일 읽기 및 행 및 열 계산
- excel - 2-3 열을 연결하는 SQL 쿼리 한 열은 숫자이고 다른 열은 Ms 액세스를 사용하여 날짜 데이터 유형입니다
- flutter - 레이아웃에 영향을주지 않고 컨테이너의 크기를 늘리려면 어떻게합니까?
관련 질문
- javascript : jQuery를 사용하여 특정 div가 존재하지 않는 경우 어떻게 div를 숨길 수 있습니까?
- html : 탐색 막대의 이미지에 : hover를 어떻게 추가합니까?
- javascript : 이전 애니메이션의 마지막 프레임에서 애니메이션을 시작하는 방법은 무엇입니까?
- javascript : 메뉴가 스크롤 상단에 고정되기를 원합니다.
- html : "너비 : calc (100 % /3);" 제대로 작동하지 않음
- html : 컨테이너 유체 내부의 콘텐츠를 부트 스트랩 4의 컨테이너와 정렬하는 방법은 무엇입니까?
- html : 뷰 중심에서 원래 위치까지 요소 애니메이션
- javascript : 메모장 크롬 확장 프로그램을 닫을 때 사용자의 메모가 손실되지 않도록하는 방법은 무엇입니까?
- javascript : 선택한 메트로 UI CSS 타일 요소가 작동하지 않습니다.
- javascript : 브라우저 화면 크기를 조정할 때 목록의 항목 크기가 조정되지 않도록합니다.
grid-template-columns
를 사용하지 마십시오 . 이는 명시 적으로 정의한 그리드 인명시 그리드에서 열 트랙을 정의합니다.대신
즉,grid-auto-columns
. 이는 명시 적 그리드 외부에서 자동으로 생성되는 열/행인암시 적 그리드에서 열 트랙을 정의합니다.grid-auto-columns
와 함께 열 수를 정의 할 필요가 없습니다. 그리드 컨테이너가 필요에 따라 만들도록하십시오.그런 다음 모든 열을 수평으로 흐르게하려면 모두
grid-row: 1
로 설정하십시오. .grid-row: 1
를 추가 첫 번째 예의 열에 :...도 작동합니다. 그러나 그것은 약간의 해킹입니다.
grid-auto-columns
와 함께 더 자연스러운 해결책이 있습니다.