Проблемы с макетом сетки CSS - PullRequest
Новая
       24

Проблемы с макетом сетки CSS

0 голосов
/ 06 июля 2019

Так что я новичок в сетке CSS. Я разработал макет для веб-страницы для этого примера. Я пометил, как должна быть страница, строки и их номера. (изображение здесь https://postimg.cc/PPxDXKsx)

Даже при этом я все еще изо всех сил пытаюсь заставить CSS-сетку правильно расположиться.

Я прикрепил шаблон HMTL CSS о том, как структурирована моя страница (без содержания на данный момент)

Много исследований о том, как работает CSS-сетка. В каждом разделе я пытался раскрасить фон каждого элемента, чтобы можно было визуализировать макет каждого раздела. Помимо использования инструментов разработки 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 Ответ

0 голосов
/ 06 июля 2019

У вас есть несколько проблем, которые я вижу:

Синтаксис сетки

Ваш синтаксис для сетки в .page-grid неверен, поэтому сетка даже не регистрируется. 

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

Я бы порекомендовал еще раз взглянуть на MDN 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;, чтобы сказать: «Закройте весь ряд». Зафиксируйте свой знак, и вы получите там, что хотите.

Если это не , что вы пытались, попробуйте! И узнайте больше о отрицательных линиях сетки в документации.

...