Make a responsive image and caption grid-CodePudding

I am trying to create a responsive grid which shows images and a caption underneath. I am currently trying to use a table to achieve this, although not sure if this is the best method?

What I would like the final product to look like on a device with a smaller screen:

-----
image
-----
caption

-----
image
-----
caption

-----
image
-----
caption

etc...

Then on a larger screen:

-----     -----      ----- 
image     image      image
-----     -----      -----
caption   caption    caption

etc...

My current HTML (this currently works fine on a large screen but not on a mobile as the whole second row appears underneath the images):

   <tr>
       <td><img src="img1"></td>  
       <td><img src="img2"></td>  
       <td><img src="img3"></td>  
      </tr>
      <tr>
       <td><span >Caption 1</span></td>  
       <td><span >Caption 2</span></td>  
       <td><span >Caption 3</span></td>  
    </tr>

Then the CSS:

img {
 max-width: 100%;
}

@media only screen and (max-width: 800px){
    td {
    display: table-row;
    }
}

.text-caption {
  font-style: italic;
  font-size: inherit;
}

I have tried using the jQuery 'insertAfter', but that seems a very messy way of doing it as all the elements need a different id and I was struggling to get the code to only execute when screen was below a certain size.

Any help would be greatly appreciated.

CodePudding user response：

You could change it like this:

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 800px){
    .grid1{
    display: grid;
    grid-template-columns: 1fr;
}
}

<div >
        <div>
            <div><img src="img1"></div>
            <div><span >caption</span></div>

        </div>
        <div>
            <div><img src="img2"></div>
            <div><span >caption</span></div>

        </div>
        <div>
            <div><img src="img3"></div>
            <div><span >caption</span></div>

        </div>
        
    </div>

This could lay it out the way you are trying. The

grid-template-columns: 1fr 1fr 1fr;

tells it to make three sections in line. Then in @media query, you can tell it to line just one section pre line when the screen is small. That is this:

grid-template-columns: 1fr;

CodePudding user response：

For this I definitely wouldn't use a table, those can get weird sometimes. I'd just make the html layout using sections with a div that wraps each caption and image together, and wrap all of those into a container div and set all of the containers inner div to display: inline-block; which seems to be the functionality you want.

simply take a look at what I did here:

.container div {
  display: inline-block;
  text-align: center;
}

.container div div {
  display: block;
}

.text-caption {
  font-style: italic;
  font-size: inherit;
}

img {
 max-width: 100%;
}

<div >
   <div>
       <div><img src="img1"></div>  
       <div><span >Caption 1</span></div>  
   </div>   
   <div>
       <div><img src="img2"></div>  
       <div><span >Caption 2</span></div>  
   </div>
   <div>
       <div><img src="img3"></div>  
       <div><span >Caption 3</span></div>
   </div>
</div>

CodePudding user response：

I'd certainly recommend against using a <table> element for any kind of layout solution; those days are long past, should never be revisited, and we finally have meaningful solutions for layouts. So, instead, I'd suggest either CSS Grid or Flexbox.

My first suggestion will demonstrate CSS Grid, with explanatory comments in the code:

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  /* I'm using logical properties; 'inline-size' is analogous to
     'width' in Latin-derived languages, and 'block-size' would
     be 'height'; here we use the clamp() function to size the
     content at the preferred 80vw (80 viewport-width units,
     with a minimum size of 20em and a maximum size of 1200px: */
  inline-size: clamp(20em, 80vw, 1200px);
  /* again, logical properties; the margin-block (in Latin
     languages, sets both margin-top (margin-block-start) and
     margin-bottom (margin-block-end): */
  margin-block: 1em;
  /* margin-inline sets the margins on the inline-axis: */
  margin-inline: auto;
  padding: 0.5em;
}

.gallery {
  /* setting up a counter to show the <figure> number: */
  counter-reset: figCounter;
  /* display: grid to use CSS Grid layout: */
  display: grid;
  /* a gap between adjacent items in the grid,
     shorthand for column-gap and row-gap; setting
     both to 1em: */
  gap: 1em;
  /* I don't define the row-size, and instead have the
     grid size itself so to take the minimum height
     required by the contents of tho rows: */
  grid-auto-rows: min-content;
  /* defining a dynamic grid, fitting as many columns
     into the available space as possible, with each
     column sized between 15em and 1 fraction (of the
     available space): */
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
}

figure {
  border: 1px solid #000;
  border-radius: 0.5em;
  /* incrementing the counter: */
  counter-increment: figCounter;
  display: grid;
  gap: inherit;
  padding: 0.25em;
  position: relative;
}

figure::before {
  /* ensuring the aspect-ratio is 1:1, so
     that the width/height are equivalent: */
  aspect-ratio: 1;
  background-color: hsl(30deg 90% 50% / 0.5);
  /* to ensure a round element: */
  border-radius: 50%;
  /* displaying the named counter: */
  content: counter(figCounter);
  /* again using css grid: */
  display: grid;
  font-weight: 900;
  /* positioning the pseudo-element absolutely
     in relation to its parent element: */
  position: absolute;
  /* defining one dimension of the element,
     to have aspect-ratio define the other: */
  inline-size: 2em;
  /* placing the element 4% from the top
     edge of the parent, and 4% from the
     left edge: */
  inset: 4%;
  /* taking advantage of grid layout to center
     the content: */
  place-content: center;
}

img {
  border-radius: 0.5em;
  /* sizing the element to take 100% of the
     inline-axis (left-to-right) in Latin-
     derived languages:*/
  inline-size: 100%;
  /* allowing the element to cover all available,
     space maintaining its aspect-ratio: */
  object-fit: cover;
}

p {
  padding: 0.25em;
}

p::first-line {
  font-style: italic;
  font-weight: bold;
}

<main>
  <section >
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
  </section>
</main>

JS Fiddle demo.

With Flexbox:

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  inline-size: clamp(20em, 80vw, 1200px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

.gallery {
  counter-reset: figCounter;
  /* flexbox layout: */
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  /* justifying the flex-items (the child elements)
     in the layout to spread across the flow-axis 
     (the row) up to the edges of the element, with
     an equivalent space between each element on
     that row: */
  justify-content: space-between;
}

figure {
  border: 1px solid #000;
  border-radius: 0.5em;
  counter-increment: figCounter;
  display: grid;
  /* defining the size of the element
     on the flow axis: */
  flex-basis: 14em;
  gap: inherit;
  padding: 0.25em;
  position: relative;
}

figure::before {
  aspect-ratio: 1;
  background-color: hsl(30deg 90% 50% / 0.5);
  border-radius: 50%;
  content: counter(figCounter);
  display: grid;
  font-weight: 900;
  position: absolute;
  inline-size: 2em;
  inset: 4%;
  place-content: center;
}

img {
  border-radius: 0.5em;
  inline-size: 100%;
  object-fit: cover;
}

p {
  padding: 0.25em;
}

p::first-line {
  font-style: italic;
  font-weight: bold;
}

<main>
  <section >
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
  </section>
</main>

JS Fiddle demo.

Note, in the flexbox demo, that the last row of the elements may be different than the previous, because of the justify-content property-value; this can be adjusted a little if we also use flex-grow: 1 on the child elements, which will allow each of the elements to grow a little into available space; though this can itself lead to an unwanted variation in the appearance:

*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  inline-size: clamp(20em, 80vw, 1200px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

.gallery {
  counter-reset: figCounter;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  justify-content: space-between;
}

figure {
  border: 1px solid #000;
  border-radius: 0.5em;
  counter-increment: figCounter;
  display: grid;
  flex-basis: 14em;
  flex-grow: 1;
  gap: inherit;
  padding: 0.25em;
  position: relative;
}

figure::before {
  aspect-ratio: 1;
  background-color: hsl(30deg 90% 50% / 0.5);
  border-radius: 50%;
  content: counter(figCounter);
  display: grid;
  font-weight: 900;
  position: absolute;
  inline-size: 2em;
  inset: 4%;
  place-content: center;
}

img {
  border-radius: 0.5em;
  inline-size: 100%;
  object-fit: cover;
}

p {
  padding: 0.25em;
}

p::first-line {
  font-style: italic;
  font-weight: bold;
}

<main>
  <section >
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
    <figure>
      <img src="https://via.placeholder.com/200" alt="">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, totam ratione maiores repellat quibusdam voluptate quae asperiores, dicta rem sapiente facere excepturi nobis voluptatibus eaque natus minima tempora accusantium.</p>
      </figcaption>
    </figure>
  </section>
</main>

JS Fiddle demo;

References: