网格布局/Grid: Evenly Spaced Columns
By default every col
added inside a row
will automatically receive an equal amount of the available area. Notice in the code below that no sizes are specified anywhere in the classnames, yet each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).
<divclass="row"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div></div>
Note: The borders and gray background in the demo were added so it's easier to see the structure.