Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use css to realize N-Palace layout

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use css to achieve N grid layout", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use css to achieve N grid layout" this article.

Common application scenarios

Now the APP interface is basically the same, grid layout has now become the inevitable existence of every APP.

With a border, commonly used on the function Navigation page

No border, often classified on the home page

Design goal

In scss environment, n-grid is implemented through mixin, and "with or without borders" and "whether each lattice is square" can be supported:

@ include grid (3, 3, true); / / 3 x 3, with borders, and each lattice is square

@ include grid (2, 5, false, false); / / 2 x 5, no borders

Final effect

Tips on "padding percentage"

First explain a little trick, how to achieve a square, make sure that you will see it once, and the conclusion is:

If the value of padding is a percentage, then it is calculated relative to the width of the "parent" element, that is, if the width of the "parent" element is 100px, the "child" element sets the padding-top of the "child" element padding-top:100%, is actually equal to 100px, thus achieving a square (100x100). To reduce interference, we set the height of the "child" element to 0

Design ideas (it doesn't matter whether you are scss or less)

In order to facilitate the horizontal / vertical centering of internal elements, we use flex layout as a whole.

Use square placeholder, because we use padding-top:100%, so we need to use a separate div to load the content, I named it "item__content".

To fill the content container div with squares, we styled it: position:absolute;top:0;left:0;right:0;bottom:0

So our html goes like this:

Content.

Code (scss)

Three things have been done here:

In order not to be redundant, I extracted the public part and named it ".a-grid".

Mixin supports 4 parameters, namely $row (number of rows), $column (number of columns), $hasBorder (whether there is a border), and $isSquare (whether each block is guaranteed to be square).

Mixin achieves the effect of "overall no outer frame" by calculating and combining with nth-child.

. a-grid {

Display: flex

Flex-wrap: wrap

Width: 100%

. a-grid__item {

Text-align:center

Position:relative

> .item__content {

Display:flex

Flex-flow: column

Align-items: center

Justify-content: center

}

}

}

@ mixin grid ($row:3, $column:3, $hasBorder:false, $isSquare:true) {

@ extend. A-grid

. a-grid__item {

Flex-basis: 100%/$column

@ if ($isSquare) {

Padding-bottom: 100%/$column

Height: 0

}

> .item__content {

@ if ($isSquare) {

Position:absolute

Top:0;left:0;right:0;bottom:0

}

}

}

@ for $index from 1 to (($row-1) * $column + 1) {

.a-grid__item:nth-child (# {$index}) {

@ if ($hasBorder) {

Border-bottom: 1px solid # eee

}

}

}

@ for $index from 1 to $column {

.a-grid__item:nth-child (# {$column} n + # {$index}) {

@ if ($hasBorder) {

Border-right: 1px solid # eee

}

}

}

}

Use

/ / generate a palace grid with 3 rows and 3 columns and square lattice

.a-grid-3-3 {

@ include grid (3, 3, true)

}

/ / generate a 2-row, 5-column grid without borders. Each grid height is determined by the content.

.a-grid-2-5 {

@ include grid (2, 5, false, false)

}

Reminder: if you want to do the layout of n x m, don't forget to add n x m corresponding dom structure to html after using @ include grid (n, m).

The above is all the contents of the article "how to use css to achieve N-Palace layout". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report