news_aimedium_org/themes/hugo-bootstrap-5/layouts/shortcodes/threecol.html

{{/* 內文用 :::left / :::middle / :::right 分段；不需任何參數 */}}
{{- $raw := .Inner -}}
{{ $lm := split $raw ":::middle" }}
{{ $leftRaw := (replace ((index $lm 0 | default "")) ":::left" "") }}
{{ $midright := (index $lm 1 | default "") }}
{{ $mr := split $midright ":::right" }}
{{ $middleRaw := (index $mr 0 | default "") }}
{{ $rightRaw := (index $mr 1 | default "") }}

{{ $left := trim $leftRaw "\n\r\t " }}
{{ $middle := trim $middleRaw "\n\r\t " }}
{{ $right := trim $rightRaw "\n\r\t " }}

<style>
  .threecol-grid {
    display: grid;
    gap: 20px;
    align-items: start
  }

  .threecol-grid p:first-child {
    margin-top: 0;
  }

  .threecol-grid img {
    height: 100%;
    object-fit: cover;
  }

  @media (max-width:640px) {
    .threecol-grid {
      grid-template-columns: 1fr
    }
  }

  @media (min-width:641px) and (max-width:1024px) {
    .threecol-grid {
      grid-template-columns: 1fr 1fr
    }
  }

  @media (min-width:1025px) {
    .threecol-grid {
      grid-template-columns: 1fr 1fr 1fr
    }
  }
</style>

<div class="threecol-grid">
  <div class="h-100">{{ $left | markdownify }}</div>
  <div>{{ $middle | markdownify }}</div>
  <div>{{ $right | markdownify }}</div>
</div>