如何使Grid布局组件在移动窄屏设备上显示为单列？

首先修正原代码里的语法错误：内联样式中的gap=10px不符合CSS规范，需改为gap: 10px。

要让该Grid组件在窄屏设备自动切换为单列布局，可通过CSS媒体查询实现响应式适配：宽屏时保留原三列布局，当屏幕宽度小于设定断点（如768px，适配手机等窄屏设备）时，强制网格变为单列。

以下是修改后的完整代码：

<style>
.container {
  display: inline-grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

/* 窄屏适配规则 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  .container img {
    width: 100%; /* 让图片在窄屏上占满容器宽度，优化显示 */
  }
}
</style>

<div class="container">
  <figure>
    <img
      alt="光子计数标记模块"
      border="0"
      data-original-height="623"
      data-original-width="940"
      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"
    />
    <figcaption><a href="#inamp">Instrumentation Input, 16bit, 1MSPS</a></figcaption>
  </figure>
  <figure>
    <img
      alt="精密电流电压放大器模块"
      border="0"
      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"
    />
    <figcaption><a href="#dac8001">Waveform Output, C-drive, 16bit, DC to 1MSPS</a></figcaption>
  </figure>
  <figure>
    <img
      alt="输出升压模块"
      border="0"
      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="线性CCD模块"
      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"
    />
    <figcaption><a href="#tcd1304">Linear CCD, 16bit 1MSPS</a></figcaption>
  </figure>
</div>
<br />

关键说明 #

• 将内联样式提取到<style>标签中，便于维护响应式规则
• 媒体查询@media (max-width: 768px)：当屏幕宽度≤768px时触发单列布局
• 窄屏时设置图片宽度为100%，避免横向溢出，提升移动端显示体验
• 宽屏时保持原三列grid-template-columns: 1fr 1fr 1fr布局

内容的提问来源于stack exchange，提问作者DrM