css 布局

[xlearns]

参考

• youtube
• youtube
• runoob
• css_layout
• css_layout
• css_layout
• css_layout
• CSS-Houdini
• CSS-Houdini

element-ui

• vben
• menu 切换
• layout playground
• playground
• media
• Container playground

flex

• sfc
• sfc
• sfc

  grid

• codepen
• codepen
• grid响应式
• 在线demo
• 在线demo
• 在线demo

  grid基本

  display:grid;
  grid-template-columns::repeat(4,1fr);
  grid-template-rows:repeat(4,auto);
  gap:1.5em

  grid-column

• 使用 grid-column 属性定义了网格元素列的开始和结束位置
• 设置 "item2" 跨越 3 列：

  grid-column: 2 / 5;
  // grid-column: 2 / span 3 ; //等价

  grid-row

• 属性定义了网格元素行的开始和结束位置
• 设置 "item2" 跨越两行：

  grid-row: 1 /  3;
  // grid-row: 1 / span 2 ; //等价

  grid-area

• grid-area:grid-row-start|grid-column-start|grid-row-end|
• grid-area:开始行 开始列 结束行+1 结束列+1

grid 布局问题

• 参考
• 参考
• 溢出问题