html tables convert to single column on mobile devices

Following is an excerpt from a blog. It is a table. If interested, you can see the full page at https://spi-instrumentation.blogspot.com/p/spi-instrumentation-doing-more-science.html

How do I make this table appear as a single column on a narrow screen?

<div class="container" style="display:inline-grid;gap=10px;grid-template-columns: 1fr 1fr 1fr;">
  <figure>
    <img
      alt=""
      border="0"
      data-original-height="623"
      data-original-width="940"
      width="200"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkXidyakSM7QobO1rolpd82dBNBC70rbzwnNz2YitFU1BmY1-ZQUJdhc-5FMzXtJlhtEYMlr7bkZ0-2qHVGtevyVipLuUpp54GIrM77lAqQoO33AkHolY-S6hCnrQmgDYEHyeWLGp7fVwBmggszRbKCFeiMlfcwJyNQDOAflIirFvdc5u7MCv06O4Z-0tv/s320/SiPM_Amplifier_TDC_SPI.png"
    />
    <figcaption><a href="#tdc">Photon counting and tagging, precision 55ps, adj threshold, hysteresis</a></figcaption>
  </figure>
  <figure>
    <img
      alt=""
      border="0"
      data-original-height="759"
      data-original-width="955"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHo-pCXBBMlcQG46jOhkcWDJQctcP7ruACsf42aUT0okDQl_tLVd5E9P83Z3jpV2BKo_EDjAOfdM3Rs1ySd6QuwP6r7iCgbkGj3qn3iZ3ZuJOi19RTCKiSyZpbfUwdtawetec6D0CzMOV-_09y35hRtI8cedAfRoTEpeV3wke87cPFf5uVtPlfpOBsy6lM/s400/Instrumentation_Input.png"
      width="180"
    />
    <figcaption><a href="#inamp">Instrumentation Input, 16bit, 1MSPS</a></figcaption>
  </figure>
  <figure>
    <img
      alt=""
      border="0"
      width="320"
      data-original-height="775"
      data-original-width="975"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXOqXew_doBgvbpWo7Bue4mM1aIhPshJrFWSJm_hxtKpsmjAtXEPbLgGJbjvov-BRgM4wifPP3jgfc-fAx7eKU2EGObxR5fcdPz8jgBOGbJGJ80TCsbCAEsZvGPIqf28Bz_pBr8e4pfsXu5p82aKRlDnCUkKD-bRE8Fs3JHsE3WFJIu_7EzM2ZPIps3y_u/s320/Current_Ampl_SE_160kHz.png"
    />
    <figcaption><a href="#currentamp">Precision current to voltage amplifier</a></figcaption>
  </figure>
  <figure>
    <img
      alt=""
      border="0"
      data-original-height="775"
      data-original-width="974"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxQ8ZiJWGWycMv92TpYDeiEBXqVk4c0KxX6moRgiO8nMmdel0hOZPpPg0JhHXCqQM8tSHZhGv5oPuyvpQULI5ah6sd0EsA5juhrMl9wIx7UsNrtLF8CxwzBWp_hawzj3LK5fed1F0VvROcR9GQ8xQ_IkSaJSVcb0pNy91u5eA5SWqntWONotclyRL15hP/s320/DAC82001_SPI.png"
      width="320"
    />
    <figcaption><a href="#dac8001">Waveform Output, C-drive, 16bit, DC to 1MSPS</a></figcaption>
  </figure>
  <figure>
    <img
      alt=""
      border="0"
      width="320"
      data-original-height="775"
      data-original-width="974"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7PsJcRFjpjebU4ui8fqbtFRo8cbbL_EFgpeSTC9-X1b9aFF93QwZucpdW5JCIVsmJqrMwfEF4yVu6maxairsvrFvFcSrv4OYoP-1gMUA86kuYu4XjtEm8Jr1rqiukvjB4YjGLoM84jl7TW5Uo6-c8UrQLTqS0Xg7AE4NfbxiEsiPb2ne84mUrZbaSusC/s320/VoltageDriver.png"
    />
    <figcaption><a href="#boost">Output boost, capacitive loads, to ±25V, +50V, 3A</a></figcaption>
  </figure>
  <figure>
    <img
      alt=""
      border="0"
      data-original-height="775"
      data-original-width="974"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ1PDWMtkEz1mhAaOJUp_5Pi6a56mGnifmwQPXNt6mFUeY0J8UyVghe-bxUcUud_jfz9PCITmp7xhMGVzuXYbp1Wis4f2_JYq7xILTEwlmzWA_6V0hGZWIUEFfo15mvpVE9KOcGLeaTd_u_YvGuoelbqmNwSqHao5tmVOOCp60kdi-gHE5mlh9L-bXWiJI/s320/TCD1304_SPI-top.png"
      width="320"
    />
    <figcaption><a href="#tcd1304">Linear CCD, 16bit 1MSPS</a></figcaption>
  </figure>
</div>
<br />

Solution

To achieve desire effect you can target different viewport and adapt your layout using mediaquery.

However you can use autofill or autofit depending upon applications.

Auto fill

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

Auto fit

The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed.

The code mentioned below uses auto fit which ensures

450px is the minimum width of each column. No column will be narrower than this value.
2fr is the maximum width of each column, where fr stands for "fraction of the remaining space".

grid-template-columns: repeat(auto-fill, minmax(450px, 2fr))

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

</head>
<style>
figure{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

</style>

<body>
  <div class="container" style="display:grid;gap:10px;justify-content: center; grid-template-columns: repeat(auto-fill, minmax(450px, 2fr));background-color: pink;">
    <figure>
      <img
        alt=""
        border="0"
        data-original-height="623"
        data-original-width="940"
        width="200"
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkXidyakSM7QobO1rolpd82dBNBC70rbzwnNz2YitFU1BmY1-ZQUJdhc-5FMzXtJlhtEYMlr7bkZ0-2qHVGtevyVipLuUpp54GIrM77lAqQoO33AkHolY-S6hCnrQmgDYEHyeWLGp7fVwBmggszRbKCFeiMlfcwJyNQDOAflIirFvdc5u7MCv06O4Z-0tv/s320/SiPM_Amplifier_TDC_SPI.png"
      />
      <figcaption><a href="#tdc">Photon counting and tagging, precision 55ps, adj threshold, hysteresis</a></figcaption>
    </figure>
    <figure>
      <img
        alt=""
        border="0"
        data-original-height="759"
        data-original-width="955"
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHo-pCXBBMlcQG46jOhkcWDJQctcP7ruACsf42aUT0okDQl_tLVd5E9P83Z3jpV2BKo_EDjAOfdM3Rs1ySd6QuwP6r7iCgbkGj3qn3iZ3ZuJOi19RTCKiSyZpbfUwdtawetec6D0CzMOV-_09y35hRtI8cedAfRoTEpeV3wke87cPFf5uVtPlfpOBsy6lM/s400/Instrumentation_Input.png"
        width="180"
      />
      <figcaption><a href="#inamp">Instrumentation Input, 16bit, 1MSPS</a></figcaption>
    </figure>
    <figure>
      <img
        alt=""
        border="0"
        width="320"
        data-original-height="775"
        data-original-width="975"
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXOqXew_doBgvbpWo7Bue4mM1aIhPshJrFWSJm_hxtKpsmjAtXEPbLgGJbjvov-BRgM4wifPP3jgfc-fAx7eKU2EGObxR5fcdPz8jgBOGbJGJ80TCsbCAEsZvGPIqf28Bz_pBr8e4pfsXu5p82aKRlDnCUkKD-bRE8Fs3JHsE3WFJIu_7EzM2ZPIps3y_u/s320/Current_Ampl_SE_160kHz.png"
      />
      <figcaption><a href="#currentamp">Precision current to voltage amplifier</a></figcaption>
    </figure>
    <figure>
      <img
        alt=""
        border="0"
        data-original-height="775"
        data-original-width="974"
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxQ8ZiJWGWycMv92TpYDeiEBXqVk4c0KxX6moRgiO8nMmdel0hOZPpPg0JhHXCqQM8tSHZhGv5oPuyvpQULI5ah6sd0EsA5juhrMl9wIx7UsNrtLF8CxwzBWp_hawzj3LK5fed1F0VvROcR9GQ8xQ_IkSaJSVcb0pNy91u5eA5SWqntWONotclyRL15hP/s320/DAC82001_SPI.png"
        width="320"
      />
      <figcaption><a href="#dac8001">Waveform Output, C-drive, 16bit, DC to 1MSPS</a></figcaption>
    </figure>
    <figure>
      <img
        alt=""
        border="0"
        width="320"
        data-original-height="775"
        data-original-width="974"
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7PsJcRFjpjebU4ui8fqbtFRo8cbbL_EFgpeSTC9-X1b9aFF93QwZucpdW5JCIVsmJqrMwfEF4yVu6maxairsvrFvFcSrv4OYoP-1gMUA86kuYu4XjtEm8Jr1rqiukvjB4YjGLoM84jl7TW5Uo6-c8UrQLTqS0Xg7AE4NfbxiEsiPb2ne84mUrZbaSusC/s320/VoltageDriver.png"
      />
      <figcaption><a href="#boost">Output boost, capacitive loads, to ±25V, +50V, 3A</a></figcaption>
    </figure>
    <figure>
      <img
        alt=""
        border="0"
        data-original-height="775"
        data-original-width="974"
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ1PDWMtkEz1mhAaOJUp_5Pi6a56mGnifmwQPXNt6mFUeY0J8UyVghe-bxUcUud_jfz9PCITmp7xhMGVzuXYbp1Wis4f2_JYq7xILTEwlmzWA_6V0hGZWIUEFfo15mvpVE9KOcGLeaTd_u_YvGuoelbqmNwSqHao5tmVOOCp60kdi-gHE5mlh9L-bXWiJI/s320/TCD1304_SPI-top.png"
        width="320"
      />
      <figcaption><a href="#tcd1304">Linear CCD, 16bit 1MSPS</a></figcaption>
    </figure>
  </div>
  <br />
</body>