<s-stack gap="base">
  <s-grid gridTemplateColumns="repeat(12, 1fr)" gap="base">
    <s-grid-item gridColumn="span 12" gridRow="span 1">
      <s-section>
        <s-text>Full width field</s-text>
      </s-section>
    </s-grid-item>
    <s-grid-item gridColumn="span 6" gridRow="span 2">
      <s-section>
        <s-text>Half width field</s-text>
      </s-section>
    </s-grid-item>
    <s-grid-item gridColumn="span 6" gridRow="span 2">
      <s-section>
        <s-text>Half width field</s-text>
      </s-section>
    </s-grid-item>
    <s-grid-item gridColumn="span 4" gridRow="span 3">
      <s-section>
        <s-text>Third width field</s-text>
      </s-section>
    </s-grid-item>
    <s-grid-item gridColumn="span 4" gridRow="span 3">
      <s-section>
        <s-text>Third width field</s-text>
      </s-section>
    </s-grid-item>
    <s-grid-item gridColumn="span 4" gridRow="span 3">
      <s-section>
        <s-text>Third width field</s-text>
      </s-section>
    </s-grid-item>
  </s-grid>
</s-stack>
