Skip to content

Grid

响应式效果,试试拖动浏览器的宽度

Grid

col
col
col
col
col
html
<g-row>
  <g-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">col</g-col>
  <g-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">col</g-col>
  <g-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">col</g-col>
  <g-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">col</g-col>
  <g-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">col</g-col>
</g-row>

offset

offset
offset
offset
html
<g-row>
  <g-col :offset="1" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">offset</g-col>
  <g-col :offset="2" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">offset</g-col>
  <g-col :offset="3" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" style="background: gray">offset</g-col>
</g-row>