Author: Cloud shortage cup tilt

Writing in the front

These two days to understand the CSS grid layout, found that it is really good. After reading a few blogs and understanding its common properties, you can quickly generate a grid layout. It is more systematic and formal than traditional float, positioning, etc., and does not require any hacks.

While the Grid layout is pretty good, there are some front-end engineers who prefer to create divs dynamically and style them with JS.

It was also out of the need to dynamically generate grid layouts using JavaScript that grid.js was born.

Introduction of the Grid

Grid.js is a module that uses JavaScript to dynamically create regular and irregular Grid layouts. FE creates a Grid instance with new Grird(Option), and the UI of the instance is rendered as a CSS Grid layout.

rendering

Let’s start with a couple of images using grid.js. The following four renderings have a 600 by 600 pixel parent container.

The first is a 4X4 grid, with three non-atomic (1X1) grids, 2X2, 2X2, 2X1.

The second is a 5X5 regular grid, where all the children are 1X1 in size.

The third is a 6X5 grid with five non-atomic size grids.

The fourth is a 7X7 grid with four non-atomic size grids.

The Grid. Use js

Grid.js is done using ES6 class syntax, so it’s easy to use. Create a Grid instance with new Grid(Option). In the case of the 5X5 grid generated in the second image, the code is:

let grid = new Grid({
            container:document.getElementsByClassName('grid'ColCount :5, rowCount:5, width:600, height:600,});Copy the code

If you want to style each grid differently, use the external API method setGridStyleByIndex(); Also take the effect picture 5X5 grid for example, the five diagonal grids are used to set the background style, which is completed by the following code:

grid.setGridStyleByIndex(0, {"background": "red"});
grid.setGridStyleByIndex(6, {"background": "green"});
grid.setGridStyleByIndex(12, {"background": "yellow"});
grid.setGridStyleByIndex(18, {"background": "blue"});
grid.setGridStyleByIndex(24, {"background": "orange"});
Copy the code

Another problem is how to get a reference to each child element (cell). Through the external API method getGrid(n). Another problem is how to get references to all the child elements (cells). The external API method getGrids().

let grids = grid.getGrids();
for(let i = 0; i < grids.length; i++){
    grids[i].innerHTML = i + 1;
}
Copy the code

The above code takes all the small grid references and fills the grid with text content. The text content of each cell in the example is the index +1 of each cell in the DIV list.

Grid.js API

Consider the two core requirements, one is relatively simple (at least as convenient as using CSS directly) to generate the grid layout, and the second is to generate the grid layout and get a reference to each grid to add content to the grid. So these are two things.

Pass the parameter to generate a grid instance

How to generate different, regular, irregular Grid instances, mainly depends on the new Grid(option) when you pass parameters, provide passable parameters include the following.

The name of the type Introduction to the
container htmlDomElement Parent container, required item
rowCount number The grid lines
colCount number The grid number of columns
width The number and % Parent container width
height The number and % Parent container height
divCount number The number of actual cells
gridArea Array Placeholder representations of those non-1×1 cells

DivCount and gridArea: These two parameters are used to generate irregular grid layouts and are key to this module. Otherwise, you’ll have to use this module to generate a regular grid of n*m.

Let’s take the example of 4X4 grid in the first rendering. If 1, 2 and 3 grids have cross-row and cross-column behaviors, there is no need to pass divCount or gridArea, and the module will generate 4X4=16 identical grids for you. DivCount is the number of subgrids that are not 1X1 when the parent container fills up, so it is 9. Usually you know the layout by the time you get the design, and the number of sub-grids is easy to calculate (because the actual scene doesn’t need to create dozens of times dozens of trivial grids).

For each of the three non-1×1 subgrids, we need to pass an array to indicate how many rows and columns the subgrid starts in the parent grid, and how many rows and columns it spans. That is, for every subgrid that is not 1X1, pass an array of length 4. And then we’re going to put those arrays into an outsource array, which is called a gridArea.

1, for rendering gridArea = [,1,2,2 [1], [2,3,2,2], [4 say]]. The entire 4X4 grid has three sub-grids of non-1×1 size. [1,1,2,2] indicates that the 4X4 grid has a sub-grid of 2 across rows and columns starting from the first row and column.

API interface

Currently exposed apis

The name of the The parameter types Introduction to the
setGridStyleByIndex(n,style) number,obj Set the cell style, the first parameter is the cell index; Style ={“color”:”red”}
getGrids() There is no Gets all subgrid div references
getGrid(n) number Gets a subgrid

The last

This module may not be perfect, welcome your valuable comments.

Welcome to GitHub,

Please stamp here

Attached: author’s blog