网格布局

by feng chen

HTML

<h4>网格布局</h4>
<article class="layout_grid">
  <div class="left">左边部分</div>
  <div class="middle">中间部分</div>
  <div class="right">右边部分</div>
</article>

CSS

html * {margin:0;padding:0;}
.layout_grid{
  display: grid; 
  width:100%; 
  grid-template-rows: 100px;
  grid-template-columns: 100px auto 100px;
 }
 .left{background:lightblue;}
 .right{background:lightgreen;}
 .middle{background:pink;}