css-grid

0熱度

1回答

有人能幫我弄清楚爲什麼下面的CSS網格示例不能按預期工作？這裏有一個鏈接到Codepen： https://codepen.io/Nekto/pen/yPpaBE .cards { margin: 0; padding: 1em; display: grid; grid-template-columns: 1fr 1fr 1fr; gri

1熱度

3回答

我可以在CSS網格中每行有不同數量的列嗎？

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-co

0熱度

2回答

保持css網格佈局簡單

請看下面的例子。我正在學習CSS網格。整個目的是爲了保持簡單並且不需要不必要地在子元素上指定不同的佈局細節，所以解決方案應該符合這種模式。考慮以下幾點： function toggle(t) { document.querySelectorAll('div').forEach(el => el.classList[0] === t.classList[0] ?

0熱度

1回答

嵌套網格/ Flexbox標題向下推送內容

我試圖在網站上構建團隊成員列表。而且（總是）這個人有一個非常長的職位，推動他的工作描述下載。這造成了與其他工作描述不一致，設計師對此非常不情願。我迄今發現的唯一的解決辦法是在職位描述限制在3線，： font-size: 10px; height: 30px; line-height: 1; 但是，現在還沒有，如果職位變爲4線長的錯誤證明。此外，較小的屏幕甚至可能會將短文本換成長度超過4

1熱度

1回答

格列使用FR單位

我試圖做一個圖片庫時捉襟見肘，而我需要的圖片採取一半的高度，並在容器內可用寬度的一半，所以我做了這樣的事情： * { padding: 0; margin: 0; } div { height: 200px; display: grid; grid-template-columns: repeat(2, 1fr

0熱度

1回答

省略號不能在CSS網格佈局中工作

我在使用css網格div中的elipsis屬性時遇到了一些問題。如果我將elipsis屬性直接設置爲網格子節點，但在網格中的div內使用時不起作用。你可以看到這裏有什麼問題： body{ text-align:center; } .container{ width: 300px; background-color:#ccc;

0熱度

1回答

添加組件後，CSS Grid卡不再響應

我試圖在card_wrapper內佈置的卡之間添加React組件。 .card_wrapper { max-width: 1200px; margin: 10px auto 50px auto; display: grid; justify-items: center; grid-template-columns: repeat

-1熱度

1回答

css網格fr單元顯示不正確

當我在google chrome中打開下面的代碼時，header和signIn選擇器的跨度比.create選擇器長得多，即使它們應該跨越一列。會有人有什麼可能會導致這個問題的想法嗎？謝謝 grid { display: grid; height: 1800px; border: 2px blue solid; grid-template: 1fr 1fr 1fr 7fr/repeat(8,

0熱度

1回答

爲什麼css網格在IE和Edge中不起作用？

我做一個網格，像這樣的結構：我的下一個非常基本的代碼：https://codepen.io/anon/pen/PEpYoy .grid-list { \t padding: 0; \t display: -ms-grid; \t display: grid; \t list-style: none; \t -ms-grid-columns: 1fr 1fr 1fr

0熱度

1回答

在CSS網格中選擇列

我正在尋找一種方法來選擇CSS網格中的列。我發現了一種使用:nth-child()選擇器在靜態網格中選擇列的方法。例如：在3列網格中，:nth-child(2)將選擇第二列中的每個網格項目。但是，如果您有像我這樣的三個媒體查詢的響應式網格，這不起作用。我的網格有24個網格物品。在移動設備上，內容以3列8格的格子顯示。在平板電腦上，它以4×6網格顯示，依此類推。我需要一種方法來選擇第三列，例如無論