CSS 그리드의 동일한 너비 열
나는 아래 html이 css 그리드를 사용하여 행 요소에 두 개 또는 세 개 이상의 하위 요소가 있는지 여부를 n개의 열에 표시하도록 하고 싶습니다. 플렉스박스는 이것을 쉽게 만들 수 있지만 css 그리드를 사용하여 수행할 수 없습니다. 어떤 도움이든 감사합니다.
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
의 일반적인 대답은repeat(3, 1fr)
정확하지 않습니다.
그 이유는1fr
사용 가능한(!) 공간의 분포에 관한 것입니다.이는 콘텐츠가 트랙 크기보다 커지면 바로 중단됩니다.기본적으로 오버플로되지 않고 그에 따라 열 너비를 조정합니다.그게 전부가 아닌 이유야.1fr
동일한 너비가 보장됩니다.1fr
사실은 그저 의 속기일 뿐입니다.minmax(auto, 1fr)
.
열 너비가 정말로 동일해야 하는 경우 다음을 사용해야 합니다.
grid-template-columns: repeat(3, minmax(0, 1fr));
minmax(0, 1fr)
그리드 트랙을 다음과 같이 작게 만들 수 있습니다.0
하지만 만큼이나 큰1fr
동일하게 유지할 열을 만듭니다.그러나 내용이 열보다 크거나 포장할 수 없는 경우 오버플로가 발생합니다.
여기 차이를 보여주는 예가 있습니다.
@Michael_B의 답이 거의 다 왔습니다.
.grid-container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
작성 시 크롬, 파이어폭스 및 사파리에서 동일한 크기의 열을 한 줄로 제공합니다.
그리드 컨테이너에 정의합니다.너비가 동일한 세 개의 열을 설정합니다.
grid-template-columns: repeat(3, 1fr);
사용해 보십시오.
.grid-container {
display: grid;
grid-auto-columns: 1fr;
}
.grid-items {
grid-row: 1;
}
그렇지 않으면 유용한 데모가 있습니다. jsFiddle
에 대해 알아보려면fr
장치, 다음 게시물 참조:
이렇게 하면 열을 더 잘 분산시킬 수 있으며, 항목의 크기가 조정되지 않는지 여부에 관계없이 열의 크기는 동일합니다.
.row {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
grid-column: span 1;
}
질문은 3개가 아닌 임의의 수의 열을 요구합니다. 따라서 다음을 사용하십시오.
.grid-container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
.grid-container > * {
overflow: hidden;
}
이러한 방식으로, 그것의 아이들(css에서 ">*"를 사용하여 선택됨)은 특정 클래스를 가질 필요가 없거나 심지어는div
.
예: https://codepen.io/dimvai/pen/RwVbYyz
이건 어때?
.row {
display: grid;
grid-template-columns: repeat(3, calc(100% / 3));
}
전체 너비(반응성 포장 포함)
모바일에서 다운사이징을 수행할 때 이 답변 중 전체 너비가 아니거나 새 행으로 묶이지 않았습니다.부트스트랩과 유사한 것을 원한다면 이것이 아마도 당신이 찾고 있는 것일 것입니다.200px는 새 행으로 래핑이 발생하는 하한입니다.
.grid-container {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
여기 간단한 대답이 있습니다(적어도 제 관점에서는).저는 위의 문제에 대한 답변이 도움이 되지 않았습니다.여기서 'div'를 동일한 너비와 필요한 수의 열로 나누는 코드입니다.
//CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto; // no of 'auto's will be number of columns here it's 3
}
//HTML
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
그리드에 대한 자세한 정보는 W3Schools에서 확인할 수 있습니다.
이 대답들 중 하나도 저에게 효과가 없었습니다. 그래서 저는 다른 방법을 시도했습니다.저의 경우, 항목 크기는 내용과 관련이 있습니다.일부 내용이 다른 내용보다 크기 때문에 모든 열이 같지는 않습니다.저는 가로 100%, 세로 100%의 다른 부서로 어떤 물건이든 포장했고 그것이 작동하고 있습니다.
<div class="row">
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
<div style="width: 100%; height: 100%;">
<div class="item"></div>
</div>
</div>
그것은 나를 위해 효과가 있고 나는 당신을 돕기를 희망합니다.
언급URL : https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid
'programing' 카테고리의 다른 글
괜찮은 투명한 아약스 스피너를 어디서 찾을 수 있습니까? (0) | 2023.08.30 |
---|---|
요구 사항을 가져오는 방법.Poetry를 사용하는 기존 프로젝트의 txt (0) | 2023.08.30 |
__read_macro, __init, __macro에 대한 좋은 설명 (0) | 2023.08.30 |
SQL: 행을 업데이트하고 쿼리 1개로 열 값을 반환합니다. (0) | 2023.08.30 |
런타임 동안 Excel 응용 프로그램 숨기기 (0) | 2023.08.30 |