Question

所以我是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; 
    }

Answer 1

您在这里看到一些问题：

网格语法

您在.page-grid中使用网格的语法是错误的，因此甚至没有网格在注册。

/* formerly 1fr, repeat (2 1fr) should be: */
grid-template-columns: repeat(2, 1fr);

我建议再看一下MDN's CSS repeat() docs，然后再试一次。

单个规则中的属性冲突

如果我记得的话，

CSS将采用您最后提出的内容。因此，在.mens-tweed-product中，当您将grid-column-start分别设为1和3时，浏览器会将其渲染为grid-column-start: 3;。

网格仅适用于直系子女

就像现在一样，只有<section>实际上是网格的一部分。因此，当您尝试使用.mens-tweed-product，grid-column-start等对grid-column-end进行样式设置时，它们将没有任何作用。

您可以尝试Nested Grids，因为Mozilla在这里进行了总结。还有一个新兴的subgrid属性可以满足您的需求（我认为），但是它的支持尚不完善，因此您现在就应该将其放在监视之下。

也许没有负号吗？

我认为您可能在.new-in-section中使用grid-column-end: -1;说“覆盖整个行”。修理好招牌，您会在那里得到想要的东西。

如果不是您尝试的，请尝试！并在文档中详细了解negative grid lines。

CSS网格布局问题

1 个答案:

网格语法

单个规则中的属性冲突

网格仅适用于直系子女

也许没有负号吗？