Функция автоподбора в Grid не реагирует на настройку максимальной ширины контейнера - PullRequest
0 голосов
/ 06 марта 2020

В настоящее время я работаю над проектом страницы портфолио freecodecamp.

У меня есть несколько сеток и всего 5 секций.

В моем разделе проекта есть 4 элемента, и его отзывчивость работает отлично подходит с автоподгонкой,

minmax()
function.

Теперь я хочу, чтобы элементы центрировались по центру viewport при увеличении размера.

Работало с использованием place-content: center center;

Теперь я хотел ограничить столбцы, созданные с помощью auto-fit, при увеличении размера viewport до двух элементов, так как у меня есть только 4 элемента, и это не очень хорошо выглядит, когда третий элемент поднимается вверх, и четвертый элемент остается один в следующей неявной строке.

Установка max-width для контейнера, похоже, решает проблему, но после того, как функция автоподбора больше не сворачивает столбцы.

Это мой html:

    <body>

 <div class="page-layout"> 
   <header>
     <nav id="navbar">
       <ul>
         <li><a href="#welcome-section">About</a></li>
         <li><a href="#projects">Work</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul> 
      <nav>
    </header>

    <section id="welcome-section" class="welcome">
         <h1> Welcome to my World</h1>


    </section>  

    <section id="projects" class="project-section">
      <h2> Check out my latest Projects </h2>

      <div class="project-grid">

         <a id="tribute" href="https://codepen.io/aaron-werweiss/pen/YzXrxQM" target="_blank" class="project-tile">
           <img 
                src="https://lh3.googleusercontent.com/DnpqnJw1YEEl2NirGu9RJ7CPlxKR39mUx2erNwY_ur6eSDGU-wN_lK70HZ1Ck58VCYbe7VjkmnS0TX9Ve19L3JUmcQ3V8m9SpQz_eMLivqnmFcJoZE2kxHcjU22X9bg4swa39-ZBaw=w2400" 
                alt="Bruce Lee Tribute Page Thumbnail" 
                class="project-image">

        </a>

         <a href="https://codepen.io/aaron-werweiss/pen/eYNpOZO" target="_blank" class="project-tile">
           <img 
                src="https://lh3.googleusercontent.com/P9b34LlemOTx59Cz7UVMKHpnUO6EPvzNTP-nv9t03DJfNBErykxO4hg7eJ5YHO9EiUagfl3BCaJHLikKL_zz1Pzej5juiE8f3_rseC1S4x0PBDbgqYFBmhsoWOWnlzUcUuyW3gNk-Q=w2400" 
                alt="Survey Form Thumbnail" 
                class="project-image">
           <p>Survey Form</p>

         </a>

         <a href="https://codepen.io/aaron-werweiss/pen/abONQpZ" target="_blank" class="project-tile"> 
           <img 
                src="https://lh3.googleusercontent.com/gQztH_DvYSC7JOPJmEKJNLiG067yZVCFcNBcFDh46u-zmTR7jBOvTh9lPyodp5dxfRyNOLEEDhg9Q4S3xULUMrjC3bauC8FfrHTykbnkwqmOEdkwjjSoKKOKoW5b0ckBgz-iaqcWsw=w2400" 
                alt="Product Landing Page" 
                class="project-image"> 
         </a>

         <a href="https://codepen.io/aaron-werweiss/pen/MWweRwa" target="_blank" class="project-tile"> 
           <img 
                src="https://lh3.googleusercontent.com/Bi0cdGWX4ayql2LBP_izNGhy6xuwUxkbFPW_lJ0pOCMcFtKylyS5p641w8PaOD29tMNkhqLlXvRFK3DlVlAtPIoBL11VNgKX90VIs0dKnL9hr-5q99mHvZVjdPljnciUk7_MwEzsdg=w2400" 
                alt="Technical Documentation Page" 
                class="project-image">

         </a>
         </div>  

    </section> 
    <section id="contact" class="contact-section"> 

    </section>  
    <footer>

    </footer>
   </div>  
</body>

И css:

 body {

      font-family:sans-serif, helvetica;
      margin:0;
      background-color: var(--light-brown);
      width: 100%;
      height:100%;
    }

    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

    /* Global Color Pallete */

    :root {
      --light-yellow: #FFE87F;
      --light-brown: #E2DAB7;
      --brown: #D0BD65;
      --yellow: #FFD822;
      --dark-brown: #B2940B;
    }



    .page-layout {

      display:grid;
      grid-gap: 20px;
      grid-template-columns: 1fr;
      grid-template-rows: auto 100vh auto 1fr 150px;




    }
    /* Navigation */

    header {
      display:grid;
      background-color: var(--light-yellow);
      height: 100%;
      width: 100%;

    }

    nav ul {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 20px;
      justify-items: center;
      list-style-type:none;

    }

    nav a{

      text-decoration:none;
      color:black;


    }

    li {
      padding: 17px;
      font-size: 1.5rem;
      font-family: righteous, cursive;
      font-weight: bold;
      border: 1px solid black;
      background-color: var(--brown);
      width: 250px;
      text-align: center;


    }

    li:hover {

      background-color: var(--dark-brown)

    }

    /* Welcome Section */


    .welcome {

      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-template-rows: repeat(auto-fit,minmax(300px, 1fr)) ;
      font-size: 3rem;
      place-items: center center;


    }


    /* Projects */

    .project-section {

      text-align: center;
      font-size: 1.5rem;
      margin: 0 20px;
    }

    .project-grid {

      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(600px,600px ));
      grid-auto-rows: 400px;
      grid-gap: 3rem;
      //max-width: 1250px;
      place-content:center center;
      margin: 0 auto;

    }


    .project-image {

      width: 100%;
      height: 100%;
      display: block;
      object-fit:cover;

    }


    .project-title {

     // display:grid;

      padding: 2rem;
    }

    /* Contact */




    /* Footer */


    footer {

     height: 100%;
     background-color: red;
     grid-column: 1/2;
     grid-row: 5/6; 


    }

Я видел, как на другой веб-странице работает, поэтому должен быть способ .

Суммировано:

Я хочу Функция автоматической подгонки, но ограниченная двумя столбцами, при этом сохраняя отзывчивость макета при уменьшении viewport (два столбца сворачиваются до одного) и центрируется содержимое.

Спасибо за любую помощь.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...