В настоящее время я работаю над проектом страницы портфолио 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: Я хорошо знаю, что могу добиться этого с помощью медиа-запросов, но я хотел бы знать, технически ли это возможно.