In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.