CSS Grid with h1 Title

Question

This may seem like a really daft question, but I would really appreciate any help.

I'm trying to create a Gallery using CSS Grid and I would like to add a h1 tag to title the page but the Grid is taking the h1 element as another image.

This is the HTML code for the Gallery

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

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;
}

I'm just not sure how to target the h1 element.

Answer 1

Well, you've put the h1 in the grid container, so it is subject to the same grid properties as the images. If you want the heading to perform the function of a standard page heading, then remove it from the grid container.

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>