CSS 그리드의 동일한 너비 열

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장치, 다음 게시물 참조:

• CSS 그리드에는 플렉스 성장 기능이 있습니까?
• CSS 그리드 레이아웃에서 백분율과 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