Home CMS

Topnew CSS v 2023 Grid

11/04/2022 - Read: 905  
CSS

1 - Grid

And here is the result of above code

This is cell-3
This is cell-3
This is cell-3
This is cell-3

Grid 12 system, cell-1 means 1 * 100%/12, cell-6 means 6 * 100%/12 i.e. 50% in width.

Introduce 3 new class: div-5 = 100%/5, div-7 = 100%/7, div-8 = 100%/8

When parent is line, all cell-x will be responsive when screen resizes to tablet, and to mobile.

When parent is line-m, all cell-x will be responsive when screen resizes to mobile.

When parent is line-s, all cell-x will be no change when screen resizes.

Different to bootstrap, Topnew CSS Grid default to desktop size (line). The purpose of this design is trying to have the box looks simiar width when screen resizes.

class=page special size for a page, max width 1000px centered

line = desktop = line-m + line-s = line-s * 3
cell-6
cell-6
cell-4
cell-4
cell-4
cell-3
cell-3
cell-3
cell-3
cell-2
cell-2
cell-2
cell-2
cell-2
cell-2
c...1
1
1
1
1
1
1
1
1
1
1
1
line-m = tablet = line-s * 2
cell-6
cell-6
cell-4
cell-4
cell-4
cell-3
cell-3
cell-3
cell-3
cell-2
cell-2
cell-2
cell-2
cell-2
cell-2
line-s = mobile
cell-12
cell-6
cell-6
cell-4
cell-4
cell-4
c..3
c..3
c..3
c..3

As per above demo (when resize):
line: 2 * cell-6 » line-m: 1 * cell-12
line: 3 * cell-4 » line-m: 2 * cell-6 » line-s: 1 * cell-12
line: 4 * cell-3 » line-m: 3 * cell-4 » line-s: 1 * cell-12
line: 6 * cell-2 » line-m: 4 * cell-3 » line-s: 2 * cell-6
line: 12*cell-1 » line-m: 8 * cell-? » line-s: 4 * cell-3

1.1 Parent = line

Please watch the change of width of cell-x when resize to tablet and to mobile

2 cells in a line, becomes 1 cell in line-m
cell-6
cell-6
3 cells in a line, becomes 2 cells in line-m, 1 cell in line-s
cell-4
cell-4
cell-4
4 cells in a line, becomes 3 cells in line-m, 1 cell in line-s
cell-3
cell-3
cell-3
cell-3
5 cells in a line, no responsive at the moment
div-5
div-5
div-5
div-5
div-5
6 cells in a line, becomes 4 cells in line-m, 2 cells in line-s
cell-2
cell-2
cell-2
cell-2
cell-2
cell-2
7 cells in a line, used for weekly, no responsive needed
div-7
div-7
div-7
div-7
div-7
div-7
div-7
8 cells in a line, no responsive needed
div-8
div-8
div-8
div-8
div-8
div-8
div-8
div-8

Other combinations
cell-1
cell-11
cell-2
cell-10
cell-3
cell-9

Other combinations - 2
cell-4
cell-8
cell-5
cell-7

12 cells in a line, becomes 8 cells in line-m, 4 cells in line-s
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1

1.2 Parent = line-m

Please watch the change of width of cell-x when resize to mobile

2 cells in a line-m, becomes 1 cell in line-s
cell-6
cell-6
3 cells in a line-m, becomes 1 cell in line-s
cell-4
cell-4
cell-4
4 cells in a line-m, becomes 2 cells in line-s
cell-3
cell-3
cell-3
cell-3
6 cells in a line-m, becomes 3 cells in line-s
cell-2
cell-2
cell-2
cell-2
cell-2
cell-2

Other combinations
cell-1
cell-11
cell-2
cell-10
cell-3
cell-9

Other combinations - 2
cell-4
cell-8
cell-5
cell-7

12 cells in a line-m, becomes 6 cells in line-s
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1
cell-1

1.3 Parent = line-s

cells will not change as line-s is already mobile size.

cell-12
cell-1
cell-11
cell-2
cell-10
 
cell-3
cell-9
cell-3
cell-3
cell-3
cell-3
 
cell-4
cell-8
cell-4
cell-4
cell-4
 
cell-5
cell-7
 
cell-6
cell-6
cell-4
cell-4
cell-4
cell-2
cell-2
cell-2
cell-2
cell-2
cell-2
-1
-1
-1
-1
-1
-1
-1
-1
-1
-1
-1
-1
 
cell-6
cell-6
cell-3
cell-3
cell-3
cell-3
-1
-1
-1
-1
-1
-1
-1
-1
-1
-1
-1
-1

And some other special combinations.

cell-12
cell-6
cell-6
cell-4
cell-4
cell-4
cell-3
cell-3
cell-3
cell-3
div-5
div-5
div-5
div-5
div-5
cell-2
cell-2
cell-2
cell-2
cell-2
cell-2
div-7
div-7
div-7
div-7
div-7
div-7
div-7

8 cells = (cell-6 x 2 ) in (cell-3 x 4) or (cell-3 x 4) in (cell-6 x 2)
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-3
cell-3
cell-3
cell-3
cell-3
cell-3
cell-3
cell-3
div-8
div-8
div-8
div-8
div-8
div-8
div-8
div-8

9 cells = (cell-4 x 3 ) in (cell-4 x 3)
cell-4
cell-4
cell-4
cell-4
cell-4
cell-4
cell-4
cell-4
cell-4

10 cells = (cell-6 x 2) in (div-5 x 5) or (div-5 x 5) in (cell-6 x 2)
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
cell-6
div-5
div-5
div-5
div-5
div-5
div-5
div-5
div-5
div-5
div-5

You can play more with 14, 15, 16, 18, 20 cells in a line-s etc by yourself.

1.4 push-1 ~ push-11

push-x push how many cells from left

cell-4
 
cell-4 push-4

1.5 line-v vertically

You might to specify the total height of parent box

cell-4 in line-v
cell-4 in line-v
cell-4 in line-v

1.5 Manually set width / height

class="span" + data-w="400px" and/or data-height="150px"

you can set the w|h manually to your need.

1.6 Other grid class

w-1 = 1px width, w-100 = 100% width. h-1 = 1px height, h-100 = 100% height

xFlex = no flex box

Back « Topnew CSS v 2023
Next » Topnew CSS v 2023 Box

Category