CSS照相馆wGrid-间隙问题//图像无法触摸

Question

我正在尝试将3x3的照片网格放置在网格项目（onearticles）中，这是我网站的主要内容部分。 图库的网格间隙，或只是间隙，是问题。我对格式化网页设计图像还不甚了解，但是即使有了这张照片，图像之间也有巨大的差距。请帮助！

我使用简单的3x3布局图像grid-template-columns：1fr 1fr 1fr;和grid-template-rows：minmax（100px，auto）;

，并尝试了许多其他“响应式”变体，但是问题仍然存在。我不认为“ onearticles”和照相馆会继承父项的任何空白，而且我知道我必须找出一种方法来使所有9张图像在其“网格”中具有相同的大小，尽管它们并非都具有相同的尺寸/大小。到目前为止，它是重复的库存图像，因此尺寸相同，但是间隙问题是主要问题

在这些不同位置发布代码时，由于网格模板行，我发现第一行和第二行之间的间隙可能比第二行和第三行大：minmax（100px，auto） ;我可以将其切换为自动以使这些间隙垂直间隙相同，但是我不知道如何将其用于解决总体间隙问题。...

我的目标是将3x3照片网格放在包装文本的左侧，我认为这比仅使网格没有间隙要困难得多。

我在下面附加了我的所有代码以及JS Fiddle。谢谢您的帮助，并保持与众不同！

* {box-sizing: border-box;}

    

    .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;
  width: 15vh;
  height: 15vh;
  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;
   
    }

}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Baseball Website</title>
  <link rel="stylesheet" href="../stylesheet.css">
</head>

<body>
  <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>

https://jsfiddle.net/wikex004/e650oLak/14/

Answer 1

您的问题有点令人困惑，但这是您要找的东西吗？

我只删除了.gallery__img的width和height并删除了图的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>