CSS 그리드 레이아웃 정사각형 셀

CSSGrid-Layout을 기반으로 대시보드 같은 뷰를 만들고 싶습니다. 나는 화면의 전체 길이에 걸쳐 16개의 열을 펼치고 싶습니다(반응성이 있어야 함). 그런 다음 셀을 정사각형으로 만들기 위해 셀의 높이를 셀의 너비에 따라 결정해야 합니다. 문제는 일부 셀이 여러 셀에 걸쳐 있기를 원한다는 것입니다. 예를 들어, 2x1 셀을 차지하는 요소를 원합니다. 그래서 기본 그리드 레이아웃이 있습니다. .grid-container{display:grid;grid-template-column

P粉593536104 2023-08-15 20:13:32 0  1  487

CSS 그리드 레이아웃, 자동으로 행 추가 및 열 너비를 최대 그리드 항목 너비로 설정

원하는 수의 그리드 항목이 포함된 그리드 레이아웃을 원하며 그리드 항목이 채워지면 자동으로 다음과 같은 새 행이 생성됩니다. #grid{display:grid;width:256px;border:1pxsolidblack ;grid-gap:12px ;grid-template-columns:repeat(auto-fit,minmax(75px,1fr));}#gridspan{배경색상:lig

P粉818317410 2024-03-28 11:13:36 0  1  447

그리드 레이아웃 확장에 애니메이션을 적용하는 방법은 무엇입니까?

그리드 레이아웃의 확장에 애니메이션을 적용하는 방법을 알고 싶습니다. 코드에서 볼 수 있듯이 4개의 div가 있습니다. 그 중 두 개가 표시되고 나머지 두 개는 확인란을 선택한 경우에만 표시됩니다. 확인란을 선택하면 div3 및 div4가 포함된 다른 행이 추가됩니다. 확장 프로그램에 애니메이션을 적용하려면 어떻게 해야 하나요? 그리드의 크기를 작게 유지하는 것이 가장 좋습니다. 애니메이션이 (존재하지 않는) 여백에 영향을 미치는 것을 원하지 않습니다. 또한 JavaScript 없이 이 작업을 수행하고 싶습니다. 가능합니까? <...

P粉937382230 2023-08-31 21:09:37 0  1  496

단일 그리드 또는 Flex를 사용하여 다양한 카드 레이아웃 만들기: 실용적인 가이드

그림과 같은 반응형 카드 레이아웃을 만들려고 합니다. 제가 현재 하고 있는 일은 컴퓨터, 태블릿, 모바일 기기용으로 별도의 레이아웃을 만드는 것입니다. 그런 다음 미디어 쿼리를 사용하여 다른 두 보기의 표시 속성을 display:none으로 설정했습니다. 예: 컴퓨터 보기에 있는 경우 컴퓨터의 카드 레이아웃에는 디스플레이가 "없음"으로 설정되지 않지만 다른 두 컴퓨터의 디스플레이는 없음으로 설정됩니다. 이는 효과가 있지만 중복이 많이 발생합니다. Flex 또는 Grid를 사용하여 세 가지 레이아웃을 모두 구현하는 ...

P粉808697471 2024-04-02 21:07:36 0  2  508

콘텐츠 확장을 제한하는 그리드 항목

핵심요약: CSS 그리드 레이아웃에 table-layout:fixed와 유사한 속성이 있나요? 나는 달에 대한 큰 4x3 격자가 있는 연도 보기 달력을 만들려고 하고 있으며 내부에는 날짜에 대한 7x6 격자가 중첩되어 있습니다. 달력은 전체 페이지를 채워야 하므로 연도 그리드 컨테이너의 너비와 높이가 100%로 설정됩니다. .year-grid{너비:100%;높이:100%;디스플레이:그리드;그리드-템플릿:반복(3,1fr)/r

P粉199248808 2023-08-20 19:49:37 0  2  523

vim - 편집기 창의 레이아웃이 가장 아름다운 것은 무엇입니까?

스태킹 시 가장 적합하고 실용적인 창 레이아웃은 무엇입니까? 이중 열, 이중 행, 다중 행 및 다중 열, 그리드 또는 수직 T입니까? 또는 다른 것?

習慣沉默 2017-05-16 16:41:12 0  11  1500

html - CSS 레이아웃 테이블 셀 간격

테이블 레이아웃은 셀 간격 = 0을 사용하여 상단 및 하단 tr 사이에 1px 간격을 표시하는 방법

迷茫 2017-05-16 13:28:07 0  2  1042

CSS에서 눈금선을 표시할 수 있나요?

CSS 그리드 레이아웃을 배우기 시작했습니다. 이상적인 세계에서는 여러 개의 그리드 상자가 있는 div를 설정하고 그 안에 요소를 정확하게 배치하여 필요할 때 오버레이를 제공할 수 있습니다(Illustrator의 그리드에 스틱을 사용하는 것과 비슷함). 그리드를 시각적으로 표현하지 않으면 매우 어려울 수 있습니다. 라이브 서버에서 그리드를 볼 수 있습니까? Chrome 개발자 도구 "눈금선 표시"를 사용해 보았지만 새로 고치거나 변경할 때마다 사라집니다. 혹은 여러 요소와 빈 공간으로 구성된 좀 더 정확한 것을 원...

P粉133321839 2024-03-31 20:38:21 0  2  563

Vuetify 프로젝트 목록의 적응형 그리드 레이아웃

흔해 보이는 문제에 부딪혔지만 극복할 수 있습니다. 개체 목록을 반환하는 API 쿼리가 있습니다. 내 페이지를 콘텐츠로 가득 찬 카드 그리드로 표시하고 싶습니다. 그리드에 5개의 열이 있고 행 수가 목록의 요소 수에 맞게 조정되기를 원합니다. 구현 방법을 알아낼 수 있습니다. 예: 항목[{"id":1,"title":"title1,"description":"descri를 반환하는 쿼리가 있습니다.

P粉710478990 2024-01-29 11:36:47 0  1  496

레이아웃 문제

죄송한데 레이아웃에 대해 알려주실 수 있나요?

不言失败 2021-04-11 22:59:23 0  1  1389

이미지를 자르고 이동합니다. 그리드 레이아웃

이미지를 올바른 위치에 놓고 위쪽과 아래쪽을 자르는 데 어려움을 겪고 있습니다. 다음은 다음과 같습니다(영웅 부분): https://www.behance.net/gallery/161732057/CozyMornings-online-store 전체 프로젝트는 그리드 위에 구축됩니다. 컨테이너보다 크고 왼쪽으로 이동하고 위쪽과 아래쪽이 잘린 원형 이미지가 필요합니다. 게다가 반응성이 좋아야 합니다. 패키지에 이미지를 넣으려고 합니다. 이 래퍼에 상대 위치를 지정하고 오버플로를 숨깁니다. 이것은 아니다

P粉548512637 2023-09-15 19:18:46 0  1  603

고정 열 및 열 위치와 그리드 자동 레이아웃 혼합

CSS Grid<divid="grid"><divclass="main-item">Main</div></div>#grid{display:grid;grid-template-columns:repeat( 5, 자동);텍스트 정렬:중심;}#grid>*{bo

P粉492959599 2023-09-15 16:01:55 0  1  458

CSS 그리드를 사용한 사용자 정의 레이아웃: 특정 요소 타겟팅

CSS 그리드를 사용하여 이 디자인을 재현해야 하며 결과를 얻기 위해 특정 그리드 요소의 위치를 ​​지정하려고 시도했지만 성공하지 못했습니다. 이것이 제가 현재 갖고 있는 것입니다. 몇 가지 사항을 수정해야 하지만 그 전에 바로 구조를 가져오고 싶습니다. 첨부된 코드 조각은 다음과 같습니다. .grid-container{display:grid;grid-template-columns:repeat(13,minmax(30px,auto));gap:30px;}.grid-item{Background-colo

P粉144705065 2024-03-28 11:25:39 0  1  287

기본 레이아웃을 변경하지 않고 MediaQueries를 통해 더 작은 해상도로 표시되는 레이아웃을 변경할 수 있습니까?

요소가 예상대로 표시되도록 기본 해상도에서 "격자 템플릿 열" 레이아웃을 사용하고 있지만, 더 작은 해상도에서는 컨테이너 우선 순위에 따라 렌더링되어 변경하고 싶은 시각적 효과를 생성합니다. 기본 해상도: 디스플레이 왼쪽에서 렌더링한 다음 디스플레이 반대쪽, 그 아래에서 렌더링합니다. 더 작은 해상도에서는 요소가 이 레이아웃으로 렌더링되기를 원합니다. 그런 다음 각 요소가 다른 요소 아래에 하나씩 렌더링됩니다. <divclassName='containerabout_container'><div>...

P粉301523298 2023-09-16 14:17:29 0  1  906

LAN에서 웹페이지에 접속할 수 없는 이유는 무엇입니까?

웹페이지는 튜토리얼에 따라 설정된 후에는 LAN의 다른 컴퓨터에서 액세스할 수 없는 정적 웹페이지입니다.

玛雅婚纱婚庆阿科 （财务） 2021-01-10 11:33:29 0  1  1225

Tailwind CSS를 사용하여 그리드에서 항목의 마지막 행을 중앙에 배치하는 방법은 무엇입니까?

Tailwind(React 사용)를 사용하여 최종 프로젝트를 그리드 레이아웃에 맞추는 데 문제가 있습니다. 기본적으로 나는 3개의 항목을 원하고 3개의 항목이 남지 않은 경우(예: 2개 또는 1개)를 중앙에 배치하고 싶습니다. 일종의 colspan을 시도했지만 예상대로 작동하지 않았습니다. 내가 하려는 작업을 더 잘 설명하기 위해 몇 가지 다이어그램을 첨부했습니다. 현재 레이아웃: 항목이 2개 남은 원하는 레이아웃: 항목이 1개 남은 원하는 레이아웃: <divclassName="xl:gridgrid- cols-3ga

P粉311563823 2023-08-28 20:06:09 0  1  474

LAN 웹사이트에서 인트라넷 장치가 연결되지 않고 웹페이지를 열 수 없습니다.

안녕하세요 여러분, 왜 내 로컬 웹사이트와 인트라넷 장비가 웹페이지에 연결되지 않습니까? 무슨 일이 일어나고 있나요? 조언을 부탁드립니다.

phpcn_u70761 2017-12-06 16:44:32 0  5  1896

왼쪽 및 오른쪽 레이아웃이 잘못됨

그릴 때 왼쪽과 오른쪽 레이아웃이 잘못된 이유는 무엇입니까?

P粉653371603 2022-01-18 19:02:01 0  1  1176

그리드를 사용하여 특정 디자인 만들기: 단계별 가이드

이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"><liclass="첫 번째"></li><liclass="두 번째"></li><liclass="세 번째"></li

P粉662361740 2024-04-06 20:29:08 0  2  831

CSS - Flex 레이아웃 문제

헤더는 플렉스 레이아웃을 사용하는데, 검색창을 가로 중앙에 배치하고 싶은데, 네이티브 IOS의 레이아웃과 유사하게 왼쪽과 오른쪽의 내용에 영향을 받지 않게 구현한 것으로 기억합니다. 이전에는 flex.css를 사용하고 나서 잊어버렸습니다. 이를 어떻게 구현하는지 살펴보겠습니다.

曾经蜡笔没有小新 2017-05-19 10:47:50 0  4  1053