«css-grid» 태그된 질문

CSS Grid를 사용하여 간단한 페이지를 만들려고합니다. 내가 실패한 것은 HTML에서 해당 그리드 셀로 텍스트를 중앙에 배치하는 것입니다. 및 선택기 div의 내부와 외부 에서 별도 의 콘텐츠를 배치 하고 CSS 속성 중 일부를 사용하여 아무 소용이 없었습니다.left_bgright_bg 어떻게해야합니까? html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: …

179 html  css  centering  css-grid 

TL; DR :table-layout: fixed CSS 그리드 와 같은 것이 있습니까? 나는 몇 달 동안 큰 4x3 격자가있는 연도 달력을 만들려고 시도했으며 그 안에는 7x6 격자가 중첩되었습니다. 달력은 페이지를 채워야하므로 연도 그리드 컨테이너의 너비와 높이가 각각 100 %가됩니다. .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, …

153 css  grid-layout  css-grid 

상당히 낡은 벽돌 레이아웃을 구현해야합니다. 그러나 여러 가지 이유로 JavaScript를 사용하여 원하지 않습니다. 매개 변수 : 모든 요소의 너비가 동일합니다 요소는 서버 측에서 계산할 수없는 높이를 갖습니다 (이미지와 다양한 양의 텍스트) 필요한 경우 고정 된 수의 열로 살 수 있습니다 현대적인 브라우저에서 작동이에 대한 사소한 해결책이 속성.column-count 해당 솔루션의 문제점은 …

134 html  css  flexbox  css-grid 

미디어 쿼리를 사용하지 않고 CSS 그리드 랩을 만들 수 있습니까? 제 경우에는 그리드에 배치하려는 비 결정적 항목 수가 있고 해당 그리드가 래핑되기를 원합니다. Flexbox를 사용하면 안정적으로 공간을 제대로 배치 할 수 없습니다. 많은 미디어 쿼리도 피하고 싶습니다. 다음은 몇 가지 샘플 코드입니다 . .grid { display: grid; grid-gap: 10px; grid-auto-flow: …

126 html  css  css-grid 

각 행은 요소를 맞추는 데 필요한 최소 높이 일 수 있기 때문에 Flexbox를 사용하여 달성하는 것은 불가능하다고 생각하지만 최신 CSS 그리드를 사용하여 달성 할 수 있습니까? 명확하게 말하면, 각 행이 아닌 모든 행에서 그리드의 모든 요소에 대해 동일한 높이를 원합니다. 기본적으로 가장 높은 "셀"은 행의 셀뿐만 아니라 모든 셀의 높이를 …

101 css  flexbox  grid-layout  css-grid 

나는- <button>태그 의 내부 요소 를 flexbox의 justify-content: center. 그러나 Safari는 그들을 중심에 두지 않습니다. 다른 태그에 동일한 스타일을 적용 할 수 있으며 의도 한대로 작동합니다 ( <p>-tag 참조 ). 버튼 만 왼쪽 정렬됩니다. Firefox 또는 Chrome을 사용하면 차이를 확인할 수 있습니다. 덮어 써야하는 사용자 에이전트 스타일이 있습니까? 아니면이 문제에 …

91 html  css  safari  flexbox  css-grid