自动填充并适合 CSS 网格
Auto Fill and Fit CSS Grid
我正在尝试制作一个 CSS 网格来自动调整大小并自动填充我的项目。目前，我正在尝试使网格项目自动填充，但这是行不通的。这些项目间隔太远。其次，我想让它适合设备尺寸。 IE。如果是智能手机：一列，如果是平板电脑：两列，如果是电脑：四列。只知道下面的代码是一个更大网站的一部分，但无论如何我都会附加它以防它干扰其他任何东西。
:root{
--grid-size: 200px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #1F363D;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #BBBBBB;
color: #1F363D;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #808782;
color: white;
}
body{
margin: 0px;
}
a{
font-family: monospace;
font-size: 20px;
}
p{
font-family: monospace;
}
h1 {
font-family: monospace;
}
h2 {
font-family: monospace;
}
.header {
text-align: center;
background-color: #000088;
color: white;
padding: 5px;
}
.grid-item img{
width: var(--grid-size);
height: var(--grid-size);
border-radius: 10px;
border-style: solid;
border-width: 4px;
border-color:#1F363D;
}
.grid-holder {
display: grid;
grid-template-columns: var(--grid-size) var(--grid-size) var(--grid-size) var(--grid-size);
grid-templete-rows: var(--grid-size) var(--grid-size) var(--grid-size) var(--grid-size);
gap: 20px;
height: 100%;
width: fit-content;
margin: auto;
pading: 5px;
}
.grid-item{
text-align: center;
padding: 5px;
width: 200px;
display: grid;
place-content: center;
cursor: pointer;
}
.grid-item a:link {
text-decoration: none;
color: #1F363D
font-size: ;
}
.grid-item a:visited {
color: #1F363D;
}
.grid-item a:hover {
color: #000088;
}
.grid-item a:active {
color: #000088;
}
.row {
display: flex;
height: 50%;
}
.column {
flex: 50%;
display: grid;
place-content: center;
text-align: center;
}
.column img {
width: auto;
height: 75vh;
display: block;
}
.column button {
width: 50%;
margin: auto;
background-color: white;
border-style: solid;
border-width: 3px;
border-color: #000088;
border-radius: 10px;
font-family: monospace;
color: #000088;
height: 40px;
transition-duration: 500ms;
margin-top: 10px;
}
.column button:hover{
color: white;
background-color: #000088;
transition-duration: 500ms;
}
<div class="header">
<h1>Portfolio</h1>
<h2>Projects</h2>
</div>
<div class="topnav">
<a href="/index.html">Home</a>
<a class="active" href="/projects.html">Projects</a>
<a href="/contact.html">Contact</a>
<a href="/about.html">About</a>
</div>
<div class="grid-holder">
<a class="main-link" href="/projects/mastermind.html">
<div class="grid-item" id="mastermind-holder">
<img src="/images/mastermind-icon.png">
<a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
</div>
</a>
<a href="/projects/simon.html">
<div class="grid-item" id="simon-holder">
<img src="/images/simon-icon.png">
<a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
</div>
</a>
</div
在网格容器中，您可以尝试使用此规则使它们流畅：
grid-template-columns: repeat(auto-fill, var(--grid-size));
这将用大小为“--grid-size”的列填充容器，如果有足够的 space 则添加空列。
如果您不想创建新的空列，则可以使用 auto-fit 而不是 auto-fill 作为上述“重复”函数的第一个参数。
In this MDN page您可以使用“重复”功能了解有关动态网格列的更多信息。
这是您的代码的更新片段，我对网格容器 class 进行了一些编辑（删除了自动边距并使用 justify-content 使列在屏幕中居中）。
另外，我删除了项目外部的 link，因为里面也有一个 link。在 html 中不可能将两个 link 一个放在另一个里面，因为这会导致一些错误的 html 解释。
这里是：
:root{
--grid-size: 200px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #1F363D;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #BBBBBB;
color: #1F363D;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #808782;
color: white;
}
body{
margin: 0px;
}
a{
font-family: monospace;
font-size: 20px;
}
p{
font-family: monospace;
}
h1 {
font-family: monospace;
}
h2 {
font-family: monospace;
}
.header {
text-align: center;
background-color: #000088;
color: white;
padding: 5px;
}
.grid-item img{
width: var(--grid-size);
height: var(--grid-size);
border-radius: 10px;
border-style: solid;
border-width: 4px;
border-color:#1F363D;
}
.grid-holder {
display: grid;
grid-template-columns: repeat(auto-fill, var(--grid-size));
gap: 20px;
height: 100%;
pading: 5px;
justify-content: center;
}
.grid-item{
text-align: center;
padding: 5px;
width: 200px;
display: grid;
place-content: center;
cursor: pointer;
}
.grid-item a:link {
text-decoration: none;
color: #1F363D;
}
.grid-item a:visited {
color: #1F363D;
}
.grid-item a:hover {
color: #000088;
}
.grid-item a:active {
color: #000088;
}
.row {
display: flex;
height: 50%;
}
.column {
flex: 50%;
display: grid;
place-content: center;
text-align: center;
}
.column img {
width: auto;
height: 75vh;
display: block;
}
.column button {
width: 50%;
margin: auto;
background-color: white;
border-style: solid;
border-width: 3px;
border-color: #000088;
border-radius: 10px;
font-family: monospace;
color: #000088;
height: 40px;
transition-duration: 500ms;
margin-top: 10px;
}
.column button:hover{
color: white;
background-color: #000088;
transition-duration: 500ms;
}
<div class="header">
<h1>Portfolio</h1>
<h2>Projects</h2>
</div>
<div class="topnav">
<a href="/index.html">Home</a>
<a class="active" href="/projects.html">Projects</a>
<a href="/contact.html">Contact</a>
<a href="/about.html">About</a>
</div>
<div class="grid-holder">
<div class="grid-item" id="mastermind-holder">
<img src="/images/mastermind-icon.png" />
<a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
</div>
<div class="grid-item" id="simon-holder">
<img src="/images/simon-icon.png" />
<a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
</div>
</div>
我正在尝试制作一个 CSS 网格来自动调整大小并自动填充我的项目。目前，我正在尝试使网格项目自动填充，但这是行不通的。这些项目间隔太远。其次，我想让它适合设备尺寸。 IE。如果是智能手机：一列，如果是平板电脑：两列，如果是电脑：四列。只知道下面的代码是一个更大网站的一部分，但无论如何我都会附加它以防它干扰其他任何东西。
:root{
--grid-size: 200px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #1F363D;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #BBBBBB;
color: #1F363D;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #808782;
color: white;
}
body{
margin: 0px;
}
a{
font-family: monospace;
font-size: 20px;
}
p{
font-family: monospace;
}
h1 {
font-family: monospace;
}
h2 {
font-family: monospace;
}
.header {
text-align: center;
background-color: #000088;
color: white;
padding: 5px;
}
.grid-item img{
width: var(--grid-size);
height: var(--grid-size);
border-radius: 10px;
border-style: solid;
border-width: 4px;
border-color:#1F363D;
}
.grid-holder {
display: grid;
grid-template-columns: var(--grid-size) var(--grid-size) var(--grid-size) var(--grid-size);
grid-templete-rows: var(--grid-size) var(--grid-size) var(--grid-size) var(--grid-size);
gap: 20px;
height: 100%;
width: fit-content;
margin: auto;
pading: 5px;
}
.grid-item{
text-align: center;
padding: 5px;
width: 200px;
display: grid;
place-content: center;
cursor: pointer;
}
.grid-item a:link {
text-decoration: none;
color: #1F363D
font-size: ;
}
.grid-item a:visited {
color: #1F363D;
}
.grid-item a:hover {
color: #000088;
}
.grid-item a:active {
color: #000088;
}
.row {
display: flex;
height: 50%;
}
.column {
flex: 50%;
display: grid;
place-content: center;
text-align: center;
}
.column img {
width: auto;
height: 75vh;
display: block;
}
.column button {
width: 50%;
margin: auto;
background-color: white;
border-style: solid;
border-width: 3px;
border-color: #000088;
border-radius: 10px;
font-family: monospace;
color: #000088;
height: 40px;
transition-duration: 500ms;
margin-top: 10px;
}
.column button:hover{
color: white;
background-color: #000088;
transition-duration: 500ms;
}
<div class="header">
<h1>Portfolio</h1>
<h2>Projects</h2>
</div>
<div class="topnav">
<a href="/index.html">Home</a>
<a class="active" href="/projects.html">Projects</a>
<a href="/contact.html">Contact</a>
<a href="/about.html">About</a>
</div>
<div class="grid-holder">
<a class="main-link" href="/projects/mastermind.html">
<div class="grid-item" id="mastermind-holder">
<img src="/images/mastermind-icon.png">
<a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
</div>
</a>
<a href="/projects/simon.html">
<div class="grid-item" id="simon-holder">
<img src="/images/simon-icon.png">
<a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
</div>
</a>
</div
在网格容器中，您可以尝试使用此规则使它们流畅：
grid-template-columns: repeat(auto-fill, var(--grid-size));
这将用大小为“--grid-size”的列填充容器，如果有足够的 space 则添加空列。
如果您不想创建新的空列，则可以使用 auto-fit 而不是 auto-fill 作为上述“重复”函数的第一个参数。
In this MDN page您可以使用“重复”功能了解有关动态网格列的更多信息。
这是您的代码的更新片段，我对网格容器 class 进行了一些编辑（删除了自动边距并使用 justify-content 使列在屏幕中居中）。 另外，我删除了项目外部的 link，因为里面也有一个 link。在 html 中不可能将两个 link 一个放在另一个里面，因为这会导致一些错误的 html 解释。
这里是：
:root{
--grid-size: 200px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #1F363D;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #BBBBBB;
color: #1F363D;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #808782;
color: white;
}
body{
margin: 0px;
}
a{
font-family: monospace;
font-size: 20px;
}
p{
font-family: monospace;
}
h1 {
font-family: monospace;
}
h2 {
font-family: monospace;
}
.header {
text-align: center;
background-color: #000088;
color: white;
padding: 5px;
}
.grid-item img{
width: var(--grid-size);
height: var(--grid-size);
border-radius: 10px;
border-style: solid;
border-width: 4px;
border-color:#1F363D;
}
.grid-holder {
display: grid;
grid-template-columns: repeat(auto-fill, var(--grid-size));
gap: 20px;
height: 100%;
pading: 5px;
justify-content: center;
}
.grid-item{
text-align: center;
padding: 5px;
width: 200px;
display: grid;
place-content: center;
cursor: pointer;
}
.grid-item a:link {
text-decoration: none;
color: #1F363D;
}
.grid-item a:visited {
color: #1F363D;
}
.grid-item a:hover {
color: #000088;
}
.grid-item a:active {
color: #000088;
}
.row {
display: flex;
height: 50%;
}
.column {
flex: 50%;
display: grid;
place-content: center;
text-align: center;
}
.column img {
width: auto;
height: 75vh;
display: block;
}
.column button {
width: 50%;
margin: auto;
background-color: white;
border-style: solid;
border-width: 3px;
border-color: #000088;
border-radius: 10px;
font-family: monospace;
color: #000088;
height: 40px;
transition-duration: 500ms;
margin-top: 10px;
}
.column button:hover{
color: white;
background-color: #000088;
transition-duration: 500ms;
}
<div class="header">
<h1>Portfolio</h1>
<h2>Projects</h2>
</div>
<div class="topnav">
<a href="/index.html">Home</a>
<a class="active" href="/projects.html">Projects</a>
<a href="/contact.html">Contact</a>
<a href="/about.html">About</a>
</div>
<div class="grid-holder">
<div class="grid-item" id="mastermind-holder">
<img src="/images/mastermind-icon.png" />
<a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
</div>
<div class="grid-item" id="simon-holder">
<img src="/images/simon-icon.png" />
<a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
</div>
</div>