CSS網格布局問題
[英]CSS grid layout problems
問題描述
所以我是CSS網格的新手。 我為此示例設計了網頁布局。 我已經標出了頁面應如何列，行和行號。 （圖片在這里https://postimg.cc/PPxDXKsx ）
即使這樣，我仍然在努力使CSS網格正確布局。
我已經附上了頁面結構的HMTL CSS樣板（目前沒有內容）
關於CSS網格如何工作的大量研究。 在每個部分中，我都嘗試對每個div的背景進行顏色編碼，以便可以可視化每個部分的布局。 除了使用Firefox開發工具外，網格系統仍然無法滿足我的需求。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<header class= "header">
<!-- Nav Bar-->
</header>
<div class= "container page-grid"> <!-- Main CSS grid-->
<!-- Mini nav bar under main one-->
<section>
<div class="new-in-section">
<ul>
<li><a href="#">NEW IN</a></li>
<li><a href="#">JACKETS</a></li>
<li><a href="#">WAISTCOATS</a></li>
<li><a href="#">FORMAL COATS</a></li>
<li><a href="#">TROUSERS</a></li>
<li><a href="#">SUITS</a></li>
<li><a href="#">CLEARANCE</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
</section>
<!-- Main product section-->
<section>
<div class="mens-tweed-product">
</div>
</section>
<!-- Garment care section-->
<section>
<div class="garment-care-section">
</div>
</section>
<!--Complete the outfit section -->
<section>
<div class="complete-outfit-section">
</div>
</section>
<!--Recently viewed section -->
<section>
<div class="recent-viewed-section">
</div>
</section>
</div> <!-- Main CSS grid-->
</body>
<!-- Main CSS grid-->
.page-grid {
display: grid;
grid-template-columns: 1fr , repeat (2 1fr); /* Two columns */
grid-template-rows: 1fr, repeat (8 1fr); /* eight rows */
grid-gap: 25px 25px; /* Short hand for both col and row */
grid-gap: 25px 25px; /* Short hand for both col and row */
margin:0px;
padding:10px;
}
/* Style for "New Nav In Section" */
.new-in-section{
width: 1250px;
height: 20px;
background-color:lightblue;
background-color:none;
grid-column-start: 1;
grid-column-end: 1 ;
grid-row-start:1;
grid-row-end:1;
}
.mens-tweed-product {
height:1180px;
height:575px;
background-color:lightgreen;
grid-column-start: 1;
grid-column-start: 3;
grid-row-start: 2;
grid-row-end: 4;
}
.garment-care-section{
width: 1180px;
height: 345px;
background-color:lightcoral;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
grid-row-end: 7;
}
1 個解決方案
解決方案1
0 2019-07-06 15:12:17
您在這里看到一些問題：
網格語法
.page-grid語法錯誤，因此甚至沒有網格在注冊。
/* formerly 1fr, repeat (2 1fr) should be: */
grid-template-columns: repeat(2, 1fr);
我建議您再看一下MDN的CSS repeat（）文檔 ，然后再嘗試一下。
單個規則中的屬性沖突
如果我記得的話，CSS將采用您最后提出的任何內容。 因此，在.mens-tweed-product當您將grid-column-start為1和3 ，瀏覽器會將其呈現為grid-column-start: 3; .mens-tweed-product 。
網格僅適用於直子
就像現在一樣，只有<section>實際上是網格的一部分。 因此，當您嘗試使用grid-column-start ， grid-column-end等對.mens-tweed-product進行樣式設置grid-column-end ，它們不會產生任何效果。
您可以嘗試嵌套網格，因為Mozilla在這里進行了總結。 還有一個新興的subgrid屬性subgrid您的需求（我認為），但是它並沒有得到很好的支持，因此您現在就應該將其保持在監視之下。
可能缺少負號嗎？
我認為在.new-in-section您可能正在嘗試使用grid-column-end: -1; 說“覆蓋整行”。 修理標志，您將在那得到想要的東西。
如果這不是您要嘗試的，請嘗試！ 並在文檔中了解有關負網格線的更多信息。
HTML和CSS中基於網格的布局問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.