Question

这似乎是一个非常愚蠢的问题，但我真的很感激任何帮助。

我正在尝试使用CSS Grid创建一个Gallery，我想添加一个h1标签来标题页面，但Grid将h1元素作为另一个图像。

这是图库的HTML代码

<section class="gallery">
       <div class="gallery-text"><h1>Gallery</h1></div>          
       <figure class="gallery_item">
        <a href="skies.html"><img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image"></a>
        <figcaption class="gallery_image-caption">
            Skies Above!
        </figcaption>
       </figure>

       <figure class="gallery_item">
        <a href="seaviews.html"><img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image"></a>
        <figcaption class="gallery_image-caption">
            Beautiful Seaviews!
        </figcaption>
       </figure>

       <figure class="gallery_item">
        <a href="nature.html"><img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image"></a>
        <figcaption class="gallery_image-caption">
            Nature
        </figcaption> 
       </figure>

        <figure class="gallery_item">
        <a href="seaside.html"><img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image"></a>
        <figcaption class="gallery_image-caption">
            By the Seaside
        </figcaption> 
       </figure>

       <figure class="gallery_item">
        <a href="cities.html"><img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image"></a>
        <figcaption class="gallery_image-caption">
            Cities
        </figcaption> 
       </figure>

       <figure class="gallery_item">
        <a href="abstract.html"><img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image"></a>
        <figcaption class="gallery_image-caption">
            Something Different
        </figcaption> 
       </figure>
    </section>

CSS代码

section{

    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-template-rows: auto;

}

section h1{
    text-align: center;
}

.gallery_item{
    box-sizing: border-box;
    margin: auto;
    width: 100%;
    padding: 1rem;
    box-shadow: 1px 2px 40px 2px rgba(160,160,160, .5);
}

.gallery-image{
    width: 100%;
    display: block;
}

.gallery{
    width: 100%;
    grid-column: 1 / -1;
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
    grid-template-rows: auto;
    margin: auto;

}

.gallery_item img{
    height: 250px;
}

我只是不确定如何定位h1元素。

Answer 1

嗯，您已将h1放在网格容器中，因此它与图像具有相同的网格属性。如果希望标题执行标准页面标题的功能，则将其从网格容器中删除。

jsFiddle demo

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
  margin: auto;
}

h1 {
  text-align: center;
}

.gallery_item {
  box-sizing: border-box;
  margin: auto;
  width: 100%;
  padding: 1rem;
  box-shadow: 1px 2px 40px 2px rgba(160, 160, 160, .5);
}

.gallery-image {
  width: 100%;
  display: block;
}

.gallery_item img {
  height: 250px;
}

<h1>Gallery</h1>

<section class="gallery">
  <figure class="gallery_item">
    <a href="skies.html"><img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image"></a>
    <figcaption class="gallery_image-caption">
      Skies Above!
    </figcaption>
  </figure>

  <figure class="gallery_item">
    <a href="seaviews.html"><img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image"></a>
    <figcaption class="gallery_image-caption">
      Beautiful Seaviews!
    </figcaption>
  </figure>

  <figure class="gallery_item">
    <a href="nature.html"><img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image"></a>
    <figcaption class="gallery_image-caption">
      Nature
    </figcaption>
  </figure>

  <figure class="gallery_item">
    <a href="seaside.html"><img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image"></a>
    <figcaption class="gallery_image-caption">
      By the Seaside
    </figcaption>
  </figure>

  <figure class="gallery_item">
    <a href="cities.html"><img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image"></a>
    <figcaption class="gallery_image-caption">
      Cities
    </figcaption>
  </figure>

  <figure class="gallery_item">
    <a href="abstract.html"><img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image"></a>
    <figcaption class="gallery_image-caption">
      Something Different
    </figcaption>
  </figure>

</section>

带有h1标题的CSS网格

1 个答案: