Является ли это наиболее эффективным / гибким методом использования CSS-сеток? - PullRequest
Новая
       18

Является ли это наиболее эффективным / гибким методом использования CSS-сеток?

0 голосов
/ 31 октября 2019

Пример страницы: https://codepen.io/anthonyhvelazquez/pen/qBBVjBX

Пример, который я разместил, является рабочим примером шаблона, который я хочу иметь. У меня есть 2 фиксированных заголовка высоты, а остальная часть контейнера содержимого заполнит высоту родителя. Все содержимое контейнера содержимого будет автоматически прокручиваться, если содержимое дочернего элемента больше контейнера содержимого. Я знаю, что есть другие функции, такие как minmax и fit-content, и я хотел убедиться, что нет лучшего / более гибкого способа настройки страницы.

Некоторые другие вопросы, которые у меня возникли в отношении сеток:

  1. Если бы я хотел иметь скрытый заголовок, который появляется и исчезает при нажатии кнопки, было бы лучше использовать систему сетки и пытаться анимировать строки сетки до высоты 0, или это было бы лучше установитьконтейнер как вертикальный гибкий контейнер и изменение высоты самих панелей навигации
  2. Если бы я попытался реализовать это в Angular, пришлось бы мне обернуть мои компоненты в контейнеры div со стилем расположения сетки, чтобы поместить их вшаблон сетки или я могу добавить стили к самому компоненту, например, так: 
<div style="grid-row: 1/2">
  <app-component></app-component>
</div>

// or

<app-component style="grid-row: 1/2"></app-component>

1 Ответ

0 голосов
/ 31 октября 2019

Демонстрация codepen не отвечает и на ваш вопрос. Это самый отзывчивый метод? Нет, это не так.

С помощью системы сетки вы можете создать любой макет, какой только сможете придумать, но не везде, где вам это нужно. Вы можете просто использовать Flex, и он также будет отзывчивым. Я добавляю код для нормального веб-макета. имея заголовок, содержание раздела героя и пункт и все будет отзывчивым. Не стесняйтесь проходить через них и понимать их. Не стесняйтесь спрашивать что-нибудь об этом. Я помогу как смогу.

В Angular вы можете создавать такие компоненты, как верхний и нижний колонтитулы, добавлять соответствующие теги HTML и CSS для компонентов и импортировать их в компонент домашней страницы. Надеюсь, это поможет.

Для двух фиксированных заголовков вы можете просто увеличить высоту заголовка в своем классе. Но вы должны использовать js для добавления функции щелчка и изменения высоты этого класса заголовка.

Для конкретного примера я только что использовал flex здесь. 

body, html{
    padding: 0px;
    margin: 0px ;
    box-sizing: border-box;
}

.header{
    z-index: 10;
     height: 80px;
     width: 100%;
     position: fixed;
     background: linear-gradient( 160deg, #00689b 0%, #00adef 100%);
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);
 
 }
 

 
 .header .logo{
     width: 190px;
     height: auto;
     position: absolute;
     top: 54%;
     left: 135px;
     transform: translate(-50%, -50%);
     cursor: pointer;
     color: white;
 }
 
 .header-links{
     display: flex;
     flex-direction: row;
     float: right;
     padding: 9px 20px;
     color: white;
     font-size: 18px;

 }
 .header-links span{
    padding: 20px;

 }
  

 .hero-section{
     width: 100%;
     height: 80vh;
     position: relative;
     background-color: turquoise;
     top: 80px;
 }

 .hero-section img{
     width: 100%;
     height: 80vh;
     object-fit: cover;
     position: absolute;
 }

 .hero-section h1{
     position: absolute;
     text-align: center;
     color: white;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
 }


 .contents-container{
     padding: 5% 5%;
     position: relative;
     width: 100%;
     min-height: 100vh;
 }


 .h-features-container{
    padding-top: 20px;
    height: auto;
    width: 100%;
    position: relative;
    background-color: white;
    z-index: 1;
}

.h-features-container >h3{
    justify-content: center;
    text-align: center;
    font-size: 28px;
    color: #111;
}


.features-card-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 50px 9%;
    box-sizing: border-box;
    
}


.features-card{
    width: 300px;
    height: 412px;
background-color: red;
padding: 20px;
margin: 19px;
border-radius: 2px;
background: #fff;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
}


.features-card h3{
  text-align: center;
}

.features-card p{
  font-size: 16px;
}


/* footer */

.h-footer{
    min-height: 50vh;
    width: 100%;
    position: relative;
    bottom: 0px;
    padding: 0%;
    
    background: linear-gradient( 90deg, #00689b 0%, #00adef 100%);
}


.h-footer-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
    white-space: nowrap;
    padding: 20px 20px;
}

.h-copywrite{
    text-align: center;
    color: white;
   position: relative;
  
}

.f-box{
    height: 60%;
    width: 25%;
    padding: 20px;
    margin: 20px;
}

.f-box p{
   
    position: relative;
}

.f-box>p>a{
    cursor: pointer;
    
}

.f-box-links:before {
    content: '';
    position: absolute;
    background: white;
    width: 0px;
    height: 1px;
    top: 20px;
    opacity: .8;
    transform: translate(0%, 0%);
    transition: all 0.3s ease;
    

  }
  .f-box-links:hover:before {
    width: 25px;
  }

  .social-icon-1{
    margin-left: -8px;
  }

  @media screen and (max-width:1200px){
    .f-box{
        height: 60%;
        width: 28%;
        padding: 20px;
        margin: 20px;
    }
  }
  @media screen and (max-width:999px){
    .f-box{
        height: 60%;
        width: 26%;
        padding: 20px;
        margin: 20px;
    }
  }
<header class="header">
        <div class="logo">
            <h2>Main Logo</h2>
        </div>
        <div class="header-links">
            <span>Products</span>
            <span>Features</span>
            <span>Contact</span>
        </div>
    </header>

    <div class="hero-section">
        <img src="https://source.unsplash.com/random">
        <h1>This is a simple heading</h1>
    </div>



    <div id="features-container" class="h-features-container">
        <h3>Our Products</h3>
        <div class="features-card-container">

            <div class="features-card">

                <h3>Inventory Management</h3>
                <p>Inventory Management Software enables you to Manage Your assets The way you want you can
                    arrange your assets in a way that helps you to keep easy track.
                </p>
            </div>

            <div class="features-card">

                <h3>Order Management</h3>
                <p>Stock Management Software enables you to Manage Your asstes The way you want you can
                    arrange your assets in a way that helps you to keep easy track.
                </p>
            </div>

            <div class="features-card">

                <h3>Employee Management</h3>
                <p>Stock Management Software enables you to Manage Your asstes The way you want you can
                    arrange your assets in a way that helps you to keep easy track.
                </p>
            </div>

            <div class="features-card">

                <h3>Payroll Management</h3>
                <p>Stock Management Software enables you to Manage Your asstes The way you want you can
                    arrange your assets in a way that helps you to keep easy track.
                </p>
            </div>

            <div class="features-card">

                <h3>Attendence System</h3>
                <p>Stock Management Software enables you to Manage Your asstes The way you want you can
                    arrange your assets in a way that helps you to keep easy track.
                </p>
            </div>

        </div>
    </div>


    <!-- footer -->

    <footer class="footer">
        <div class="h-footer">
            <div class="h-footer-flex">
                <div class=" f-box">
                    <p> <a class="f-box-links">Home</a></p>
                    <p> <a class="f-box-links">Features</a></p>
                    <p><a class="f-box-links">Clients</a></p>
                    <p><a class="f-box-links">Why Us</a></p>
                    <p><a class="f-box-links">Contact Us</a></p>
                </div>

                <div class=" f-box">
                    <p> <a class="f-box-links">Terms and Condition</a></p>
                    <p> <a class="f-box-links">Privacy Policy</a></p>
                </div>

                <div class=" f-box">
                    <p>Follow us</p>
                    <p>Facebook</p>
                    <p>Instagram</p>

                </div>

            </div>

            <p class="h-copywrite">© 2019 website.in All Rights Reserved</p>
        </div>
    </footer>
...