CSS 图片库 wGrid - 间隙问题 // 图片周围的边距
CSS Photo Gallery wGrid - Gap Problem // Margin around images
已编辑 - 解决了 3x3 网格，没有间隙（如果图像大小相同）现在，对于存储在计算机中而不是在线的不同大小的图像，我将如何做到这一点？我应该在添加到代码之前标准化图像的大小，还是最好在 HTML 中调整它们的大小...我认为 CSS。当包含不同大小的图像时，我怎样才能最好地使它们全部相同 size/dimensions？对象适合似乎没有做到这一点.. JS Fiddle 和代码已更新以显示具有不同大小图像的网格导致问题....从我所看到的，像 HTML 这样的网格通常不需要在 HTML 中指定 width/height，但在 CSS?
中指定
我正在尝试将 3x3 照片网格放在网格项目 (onearticles) 中，这是我网站的主要内容部分。 画廊的网格间隙，或只是间隙，是问题所在。我还不太了解网页设计的图像格式，但即使使用这张库存照片，图像之间也有巨大的差距。 请帮忙！
我有 3x3 布局的图像，简单
网格模板列：1fr 1fr 1fr；
和
网格模板行: minmax(100px, auto);
并尝试了很多其他 "responsive" 变体，但问题仍然存在。我不认为 "onearticles" 并且照片库继承了父项目的任何差距，我知道我必须想办法让所有 9 张图像在 "grid," 尽管他们并非都拥有相同的 dimensions/sizes。截至目前，它是一张重复的库存图片，尺寸相同，但 差距问题是主要问题
在这些不同的地方发布代码时，我发现第一行和第二行之间的差距可能比第二行和第三行之间的差距更大，因为网格模板行：minmax( 100px, 自动);我可以将其切换为自动以使这些间隙垂直间隙相同，但我不知道如何利用它来解决整体间隙问题....
我的目标是让 3x3 照片网格位于环绕文本的左侧，我认为这不会比只制作没有间隙的网格难多少。
我在下面附上了我的所有代码以及 JS Fiddle。感谢大家的帮助，继续保持优秀！
* {box-sizing: border-box;}
figure {
margin: 0px;
}
.wrapper {
background-color: red;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
max-width: 100%;
margin: 0;
font: 1.2em Helvetica, arial, sans-serif;
height: 100%;}
.wrapper > * {
background-color: rgba(255, 255, 255, .7);
border-radius: 5px;
padding: 0px;}
h2 {
word-wrap: normal;
}
a:hover {
font-weight: bold;
background-color: rgb(28, 224, 238);
}
.main-head {
grid-area: header;
display: grid;
gap: 0px;
text-align: center;
padding: 0px;
word-wrap: break-word;
}
.main-head h1 {
margin-top: 3vh;
margin-bottom: 3vh;
font-size: 20px;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
height: 100%;
padding: 0px;
grid-template-areas:
"one one"
"three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
}
.wrapper article div{
height: 100%;
background-color: rgba(255, 255, 255, .7);
border-radius: 12px;
}
.one {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onelineup {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onearticles {
grid-area: one;
word-wrap: break-word;
padding: 10px;
height: 100%;
}
#morsecrazy {
border-radius: 4px;
float: right;
clear: right;
margin: 7px 15px 5px 10px;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 90%;
height: auto;
}
.ad img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 100%;
font-size: 2vh;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.three {
grid-area: three;
height: 100%;
}
.three h4 {
margin-bottom: 1vh;
margin-top: 1vh;
}
.three ul {
list-style-type: auto;
padding-left: 20px;
padding-right: 5px;
flex-direction: row;
}
.three ul li {
padding-bottom: 15px;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.four {
grid-area: four;
height: 100%;
padding: 0px;
}
.fourIFR {
overflow: hidden;
padding-top: 61.67872568688917%;
position: relative;
overflow: auto;-webkit-overflow-scrolling:touch;
}
.fourIFR-iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gallery {
display: grid;
float: left;
grid-area: one;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0px;
border: 1px solid black;
margin: 0px;
max-height: 100%;
max-width: 50%;
padding-top: 0px;
}
.gallery__img {
display: block;
object-fit: contain;
padding: 0px;
max-width: 100%;
max-width: 100%;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--5 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.main-nav {
grid-area: nav;}
.main-nav ul {
font-size: 24px;
list-style-type: none;
margin: 0;
padding: 0;}
.main-nav ul li {
padding-bottom: 0vh;}
nav ul {
margin: 0;
padding: 0;}
.side {
grid-area: sidebar;
font-size: 2.5vh;}
.side p {
margin-bottom: 0px;
padding-left: 4px;}
.ad {
grid-area: ad;
padding: 0px
}
.main-footer {
grid-area: footer;
padding: 0px;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
@media (min-width: 500px) {
.wrapper {
grid-template-columns: 1.5fr 4.5fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad content"
"footer footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
.videoofweek {
width: 100%;
min-height: 500px;
display: block;
object-fit: contain;
}
}
@media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 6fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"}
nav ul {
flex-direction: column;
}
.main-nav ul li {
padding-bottom: 5vh;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
}
<div class="wrapper">
<header class="main-head">
<h1>Baseball Website</h1>
</header>
<nav class="main-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="lineup.html">Lineup</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="vidoweek.html">Vid</a></li>
</ul>
</nav>
<article class="content">
<div class="onearticles">
<section class="gallery">
<figure class=”gallery__item gallery__item--1">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 1">
</figure>
<figure class="gallery__item gallery__item--2">
<img src="https://images.pexels.com/photos/1787035/pexels-photo-1787035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="gallery__img" alt="Image 2">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 3">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 4">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 5">
</figure>
<figure class="gallery__item gallery__item--6">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 6">
</figure>
<figure class="gallery__item gallery__item--7">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 7">
</figure>
<figure class="gallery__item gallery__item--8">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 8">
</figure>
<figure class="gallery__item gallery__item--9">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 9">
</figure>
</section>
<h2>The Lineup</h2>
<p>Thank you so much for the help. Can get doing so much more now after what's easily been my biggest impasse thus far!</p>
</div>
<div class="three">
<h2>Articles</h2>
<ul>
<li>Y</li>
<li>A</li>
<li>D</li>
<li>A</li>
</ul>
</div>
<div class="four">
</div>
</article>
<aside class="side">
<h2>Lineup</h2>
<p>C - Dude</p>
<p>1B - Dude</p>
<p>2B - Dude</p>
<p>3B - Dude</p>
<p>SS - Dude</p>
<p>LF - Dude</p>
<p>CF - Dude</p>
<p>RF - Dude</p>
<p>DH - Dude</p>
</aside>
<div class="ad">
<p>ad</p>
</div>
<footer class="main-footer">The footer</footer>
</div>
你的问题有点令人困惑，但这是你要找的吗？
我只是去掉了.gallery__img的width和height，去掉了figure.
的padding
* {box-sizing: border-box;}
figure {
margin: 0px;
}
.wrapper {
background-color: red;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
max-width: 100%;
margin: 0;
font: 1.2em Helvetica, arial, sans-serif;
height: 100%;}
.wrapper > * {
background-color: rgba(255, 255, 255, .7);
border-radius: 5px;
padding: 0px;}
h2 {
word-wrap: normal;
}
a:hover {
font-weight: bold;
background-color: rgb(28, 224, 238);
}
.main-head {
grid-area: header;
display: grid;
gap: 0px;
text-align: center;
padding: 0px;
word-wrap: break-word;
}
.main-head h1 {
margin-top: 3vh;
margin-bottom: 3vh;
font-size: 20px;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
height: 100%;
padding: 0px;
grid-template-areas:
"one one"
"three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
}
.wrapper article div{
height: 100%;
background-color: rgba(255, 255, 255, .7);
border-radius: 12px;
}
.one {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onelineup {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onearticles {
grid-area: one;
word-wrap: break-word;
padding: 10px;
height: 100%;
}
#morsecrazy {
border-radius: 4px;
float: right;
clear: right;
margin: 7px 15px 5px 10px;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 90%;
height: auto;
}
.ad img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 100%;
font-size: 2vh;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.three {
grid-area: three;
height: 100%;
}
.three h4 {
margin-bottom: 1vh;
margin-top: 1vh;
}
.three ul {
list-style-type: auto;
padding-left: 20px;
padding-right: 5px;
flex-direction: row;
}
.three ul li {
padding-bottom: 15px;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.four {
grid-area: four;
height: 100%;
padding: 0px;
}
.fourIFR {
overflow: hidden;
padding-top: 61.67872568688917%;
position: relative;
overflow: auto;-webkit-overflow-scrolling:touch;
}
.fourIFR-iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gallery {
display: grid;
grid-area: one;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(100px, auto);
gap: 0px;
border: 1px solid black;
margin: 0px;
max-height: 100%;
max-width: 100%;
padding-top: 0px;
}
.gallery__img {
display: block;
object-fit: contain;
padding: 0px;
max-width: 100%;
max-width: 100%;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--5 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.main-nav {
grid-area: nav;}
.main-nav ul {
font-size: 24px;
list-style-type: none;
margin: 0;
padding: 0;}
.main-nav ul li {
padding-bottom: 0vh;}
nav ul {
margin: 0;
padding: 0;}
.side {
grid-area: sidebar;
font-size: 2.5vh;}
.side p {
margin-bottom: 0px;
padding-left: 4px;}
.ad {
grid-area: ad;
padding: 0px
}
.main-footer {
grid-area: footer;
padding: 0px;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
@media (min-width: 500px) {
.wrapper {
grid-template-columns: 1.5fr 4.5fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad content"
"footer footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
.videoofweek {
width: 100%;
min-height: 500px;
display: block;
object-fit: contain;
}
}
@media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 6fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"}
nav ul {
flex-direction: column;
}
.main-nav ul li {
padding-bottom: 5vh;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
}
<div class="wrapper">
<header class="main-head">
<h1>Baseball Website</h1>
</header>
<nav class="main-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="lineup.html">Lineup</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="vidoweek.html">Vid</a></li>
</ul>
</nav>
<article class="content">
<div class="onearticles">
<section class="gallery">
<figure class=”gallery__item gallery__item--1">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 1">
</figure>
<figure class="gallery__item gallery__item--2">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 2">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 3">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 4">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 5">
</figure>
<figure class="gallery__item gallery__item--6">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 6">
</figure>
<figure class="gallery__item gallery__item--7">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 7">
</figure>
<figure class="gallery__item gallery__item--8">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 8">
</figure>
<figure class="gallery__item gallery__item--9">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 9">
</figure>
</section>
</div>
<div class="three">
<h2>Articles</h2>
<ul>
<li>Y</li>
<li>A</li>
<li>D</li>
<li>A</li>
</ul>
</div>
<div class="four">
</div>
</article>
<aside class="side">
<h2>Lineup</h2>
<p>C - Dude</p>
<p>1B - Dude</p>
<p>2B - Dude</p>
<p>3B - Dude</p>
<p>SS - Dude</p>
<p>LF - Dude</p>
<p>CF - Dude</p>
<p>RF - Dude</p>
<p>DH - Dude</p>
</aside>
<div class="ad">
<p>ad</p>
</div>
<footer class="main-footer">The footer</footer>
</div>
已编辑 - 解决了 3x3 网格，没有间隙（如果图像大小相同）现在，对于存储在计算机中而不是在线的不同大小的图像，我将如何做到这一点？我应该在添加到代码之前标准化图像的大小，还是最好在 HTML 中调整它们的大小...我认为 CSS。当包含不同大小的图像时，我怎样才能最好地使它们全部相同 size/dimensions？对象适合似乎没有做到这一点.. JS Fiddle 和代码已更新以显示具有不同大小图像的网格导致问题....从我所看到的，像 HTML 这样的网格通常不需要在 HTML 中指定 width/height，但在 CSS?
中指定我正在尝试将 3x3 照片网格放在网格项目 (onearticles) 中，这是我网站的主要内容部分。 画廊的网格间隙，或只是间隙，是问题所在。我还不太了解网页设计的图像格式，但即使使用这张库存照片，图像之间也有巨大的差距。 请帮忙！
我有 3x3 布局的图像，简单 网格模板列：1fr 1fr 1fr； 和 网格模板行: minmax(100px, auto);
并尝试了很多其他 "responsive" 变体，但问题仍然存在。我不认为 "onearticles" 并且照片库继承了父项目的任何差距，我知道我必须想办法让所有 9 张图像在 "grid," 尽管他们并非都拥有相同的 dimensions/sizes。截至目前，它是一张重复的库存图片，尺寸相同，但 差距问题是主要问题
在这些不同的地方发布代码时，我发现第一行和第二行之间的差距可能比第二行和第三行之间的差距更大，因为网格模板行：minmax( 100px, 自动);我可以将其切换为自动以使这些间隙垂直间隙相同，但我不知道如何利用它来解决整体间隙问题....
我的目标是让 3x3 照片网格位于环绕文本的左侧，我认为这不会比只制作没有间隙的网格难多少。
我在下面附上了我的所有代码以及 JS Fiddle。感谢大家的帮助，继续保持优秀！
* {box-sizing: border-box;}
figure {
margin: 0px;
}
.wrapper {
background-color: red;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
max-width: 100%;
margin: 0;
font: 1.2em Helvetica, arial, sans-serif;
height: 100%;}
.wrapper > * {
background-color: rgba(255, 255, 255, .7);
border-radius: 5px;
padding: 0px;}
h2 {
word-wrap: normal;
}
a:hover {
font-weight: bold;
background-color: rgb(28, 224, 238);
}
.main-head {
grid-area: header;
display: grid;
gap: 0px;
text-align: center;
padding: 0px;
word-wrap: break-word;
}
.main-head h1 {
margin-top: 3vh;
margin-bottom: 3vh;
font-size: 20px;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
height: 100%;
padding: 0px;
grid-template-areas:
"one one"
"three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
}
.wrapper article div{
height: 100%;
background-color: rgba(255, 255, 255, .7);
border-radius: 12px;
}
.one {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onelineup {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onearticles {
grid-area: one;
word-wrap: break-word;
padding: 10px;
height: 100%;
}
#morsecrazy {
border-radius: 4px;
float: right;
clear: right;
margin: 7px 15px 5px 10px;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 90%;
height: auto;
}
.ad img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 100%;
font-size: 2vh;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.three {
grid-area: three;
height: 100%;
}
.three h4 {
margin-bottom: 1vh;
margin-top: 1vh;
}
.three ul {
list-style-type: auto;
padding-left: 20px;
padding-right: 5px;
flex-direction: row;
}
.three ul li {
padding-bottom: 15px;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.four {
grid-area: four;
height: 100%;
padding: 0px;
}
.fourIFR {
overflow: hidden;
padding-top: 61.67872568688917%;
position: relative;
overflow: auto;-webkit-overflow-scrolling:touch;
}
.fourIFR-iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gallery {
display: grid;
float: left;
grid-area: one;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0px;
border: 1px solid black;
margin: 0px;
max-height: 100%;
max-width: 50%;
padding-top: 0px;
}
.gallery__img {
display: block;
object-fit: contain;
padding: 0px;
max-width: 100%;
max-width: 100%;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--5 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.main-nav {
grid-area: nav;}
.main-nav ul {
font-size: 24px;
list-style-type: none;
margin: 0;
padding: 0;}
.main-nav ul li {
padding-bottom: 0vh;}
nav ul {
margin: 0;
padding: 0;}
.side {
grid-area: sidebar;
font-size: 2.5vh;}
.side p {
margin-bottom: 0px;
padding-left: 4px;}
.ad {
grid-area: ad;
padding: 0px
}
.main-footer {
grid-area: footer;
padding: 0px;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
@media (min-width: 500px) {
.wrapper {
grid-template-columns: 1.5fr 4.5fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad content"
"footer footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
.videoofweek {
width: 100%;
min-height: 500px;
display: block;
object-fit: contain;
}
}
@media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 6fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"}
nav ul {
flex-direction: column;
}
.main-nav ul li {
padding-bottom: 5vh;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
}
<div class="wrapper">
<header class="main-head">
<h1>Baseball Website</h1>
</header>
<nav class="main-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="lineup.html">Lineup</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="vidoweek.html">Vid</a></li>
</ul>
</nav>
<article class="content">
<div class="onearticles">
<section class="gallery">
<figure class=”gallery__item gallery__item--1">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 1">
</figure>
<figure class="gallery__item gallery__item--2">
<img src="https://images.pexels.com/photos/1787035/pexels-photo-1787035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="gallery__img" alt="Image 2">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 3">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 4">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 5">
</figure>
<figure class="gallery__item gallery__item--6">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 6">
</figure>
<figure class="gallery__item gallery__item--7">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 7">
</figure>
<figure class="gallery__item gallery__item--8">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 8">
</figure>
<figure class="gallery__item gallery__item--9">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 9">
</figure>
</section>
<h2>The Lineup</h2>
<p>Thank you so much for the help. Can get doing so much more now after what's easily been my biggest impasse thus far!</p>
</div>
<div class="three">
<h2>Articles</h2>
<ul>
<li>Y</li>
<li>A</li>
<li>D</li>
<li>A</li>
</ul>
</div>
<div class="four">
</div>
</article>
<aside class="side">
<h2>Lineup</h2>
<p>C - Dude</p>
<p>1B - Dude</p>
<p>2B - Dude</p>
<p>3B - Dude</p>
<p>SS - Dude</p>
<p>LF - Dude</p>
<p>CF - Dude</p>
<p>RF - Dude</p>
<p>DH - Dude</p>
</aside>
<div class="ad">
<p>ad</p>
</div>
<footer class="main-footer">The footer</footer>
</div>
你的问题有点令人困惑，但这是你要找的吗？
我只是去掉了.gallery__img的width和height，去掉了figure.
padding
* {box-sizing: border-box;}
figure {
margin: 0px;
}
.wrapper {
background-color: red;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
max-width: 100%;
margin: 0;
font: 1.2em Helvetica, arial, sans-serif;
height: 100%;}
.wrapper > * {
background-color: rgba(255, 255, 255, .7);
border-radius: 5px;
padding: 0px;}
h2 {
word-wrap: normal;
}
a:hover {
font-weight: bold;
background-color: rgb(28, 224, 238);
}
.main-head {
grid-area: header;
display: grid;
gap: 0px;
text-align: center;
padding: 0px;
word-wrap: break-word;
}
.main-head h1 {
margin-top: 3vh;
margin-bottom: 3vh;
font-size: 20px;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
height: 100%;
padding: 0px;
grid-template-areas:
"one one"
"three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
}
.wrapper article div{
height: 100%;
background-color: rgba(255, 255, 255, .7);
border-radius: 12px;
}
.one {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onelineup {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.onearticles {
grid-area: one;
word-wrap: break-word;
padding: 10px;
height: 100%;
}
#morsecrazy {
border-radius: 4px;
float: right;
clear: right;
margin: 7px 15px 5px 10px;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 90%;
height: auto;
}
.ad img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 100%;
font-size: 2vh;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.three {
grid-area: three;
height: 100%;
}
.three h4 {
margin-bottom: 1vh;
margin-top: 1vh;
}
.three ul {
list-style-type: auto;
padding-left: 20px;
padding-right: 5px;
flex-direction: row;
}
.three ul li {
padding-bottom: 15px;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.four {
grid-area: four;
height: 100%;
padding: 0px;
}
.fourIFR {
overflow: hidden;
padding-top: 61.67872568688917%;
position: relative;
overflow: auto;-webkit-overflow-scrolling:touch;
}
.fourIFR-iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.gallery {
display: grid;
grid-area: one;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(100px, auto);
gap: 0px;
border: 1px solid black;
margin: 0px;
max-height: 100%;
max-width: 100%;
padding-top: 0px;
}
.gallery__img {
display: block;
object-fit: contain;
padding: 0px;
max-width: 100%;
max-width: 100%;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--5 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery__item--7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery__item--9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.main-nav {
grid-area: nav;}
.main-nav ul {
font-size: 24px;
list-style-type: none;
margin: 0;
padding: 0;}
.main-nav ul li {
padding-bottom: 0vh;}
nav ul {
margin: 0;
padding: 0;}
.side {
grid-area: sidebar;
font-size: 2.5vh;}
.side p {
margin-bottom: 0px;
padding-left: 4px;}
.ad {
grid-area: ad;
padding: 0px
}
.main-footer {
grid-area: footer;
padding: 0px;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
@media (min-width: 500px) {
.wrapper {
grid-template-columns: 1.5fr 4.5fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad content"
"footer footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
.videoofweek {
width: 100%;
min-height: 500px;
display: block;
object-fit: contain;
}
}
@media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 6fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"}
nav ul {
flex-direction: column;
}
.main-nav ul li {
padding-bottom: 5vh;
}
.onelineup img {
border-radius: 0px;
float: left;
clear: left;
margin: 7px 15px 5px 7px;
max-width: 300px;
height: auto;
}
}
<div class="wrapper">
<header class="main-head">
<h1>Baseball Website</h1>
</header>
<nav class="main-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="lineup.html">Lineup</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="vidoweek.html">Vid</a></li>
</ul>
</nav>
<article class="content">
<div class="onearticles">
<section class="gallery">
<figure class=”gallery__item gallery__item--1">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 1">
</figure>
<figure class="gallery__item gallery__item--2">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 2">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 3">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 4">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 5">
</figure>
<figure class="gallery__item gallery__item--6">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 6">
</figure>
<figure class="gallery__item gallery__item--7">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 7">
</figure>
<figure class="gallery__item gallery__item--8">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 8">
</figure>
<figure class="gallery__item gallery__item--9">
<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 9">
</figure>
</section>
</div>
<div class="three">
<h2>Articles</h2>
<ul>
<li>Y</li>
<li>A</li>
<li>D</li>
<li>A</li>
</ul>
</div>
<div class="four">
</div>
</article>
<aside class="side">
<h2>Lineup</h2>
<p>C - Dude</p>
<p>1B - Dude</p>
<p>2B - Dude</p>
<p>3B - Dude</p>
<p>SS - Dude</p>
<p>LF - Dude</p>
<p>CF - Dude</p>
<p>RF - Dude</p>
<p>DH - Dude</p>
</aside>
<div class="ad">
<p>ad</p>
</div>
<footer class="main-footer">The footer</footer>
</div>