Detailed explanation of the flexible use of CSS grid system in projects

Preface

CSS grids are usually bundled in various frameworks, but sometimes you need to customize a CSS grid yourself to meet actual business needs. This article talks about the flexible use of CSS grid system in projects.

need

The UI is designed with the following layout, where the orange part in the upper left corner is fixed, and the blue part is dynamically rendered. They are displayed from front to back. If there is one, one block is displayed; if there are two, two blocks are displayed; and so on. If there are more than 6 data, the extra data will be displayed in the four columns below.

analyze

As can be seen from the figure, there are two types of grids, one is a 3-column grid and the other is a 4-column grid. When the backend interface returns data, js needs to make a judgment: when the data is greater than 6, the first 6 are placed in array A, and the data in array A is displayed in a 3-column grid. The remaining part is placed in array B, and the data in array B is displayed in a 4-column grid.

HTML part

<div id="app">
  <div class="grid-container">
    <div style="width: 25%; height: 220px; float: left; background-color: #FF6600; "></div>
    <div class="row" style="width: 75%; float: right;">
      <div class="col-3" v-for="(item, index) in groupListCol3" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
    <div class="row" style="width: 100%;">
      <div class="col-4" v-for="(item, index) in groupListCol4" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
  </div>
</div>

CSS part

.grid-container {
      width: 100%;
    }
    .grid-container *{
      box-sizing: border-box;
    }

    .grid-container .row:before,
    .grid-container .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .grid-container [class*='col-'] {
      float: left;
      min-height: 1px;
      /*-- gutter --*/
      padding: 0 0 20px 20px;
    }
    .grid-container .col-3{
      width: 33.33%;
      height: 120px;
    }
    .grid-container .groups-cell {
      background-color: #66d3ff;
      height: 100px;
    }
    .grid-container .col-4 {
      width: 25%;
      height: 120px;
    }
    .grid-container .col-4:nth-child(4n+1) {
      padding: 0 0px 20px 0px;
    }

Note: In a 4-column grid, the first cell in each row does not need padding-left, so, finally, you have to set the value of .col-4:nth-child(4n+1) .

js part

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      groupListCol3: [],
      groupListCol4: []
    },
    created () {
      let list = [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'},
        {name: 'D'},
        {name: 'E'},
        {name: 'F'},
        {name: 'G'},
        {name: 'H'},
        {name: 'I'},
        {name: 'J'},
        {name: 'K'},
        {name: 'L'}
      ]
      if (list.length > 6) {
        this.groupListCol3 = list.slice(0, 6)
        this.groupListCol4 = list.slice(6)
      } else {
        this.groupListCol3 = list
      }
    }
  })
</script>

summary

This article does not explain the principles of CSS grids, but rather explains how to use the CSS grid system to provide a solution to specific business problems. For the principles of the grid system, please see the reference section, which is written in great detail by this foreigner.

refer to

Creating Your Own CSS Grid System

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: W3C Tutorial (7): W3C XSL Activities

>>: Implementation of mysql decimal data type conversion