后端开发教程 - Java、Spring Boot 实战 - msg200.com
2021 年通过 5 个练习掌握 CSS 网格模型 || CSS 2021 🔥
YouTube
设置🔥
1级
二级
让我们用网格模板区域来改变游戏规则😎
3级
4级
儿子，你赢了吗？让我们火力全开🥵
5级
结论
这是一份实用指南，通过构建适用于所有屏幕尺寸的 5 种响应式布局，帮助您在 2021 年高效学习 CSS 网格系统/模型。
在这里查看 Figma 设计
目录 -
YouTube
如果这对你来说很困难，那么请观看 Youtube 上的分步教程🔥
设置🔥
打开Codepen / 任何代码编辑器并将这些放置
SCSS
// Defining Break-Points
$bp : (
mobile : 480px,
tablet : 768px,
desktop : 1440px,
);
//Defining our Conditional Media query Mixins.
//To save Time & Coffee.
@mixin query($screen){
@each $key,$value in $bp{
// defining max-width
@if ($screen == $key) {
@media (max-width : $value){@content};
}
}
}
再次 .......
//Changing The Default Settings..
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
body{
font-family: sans-serif;
font-size:30px;
}
}
//Defining settings of all .box- classes with
//Border color & placing text at Center.
[class ^="box-"]{
display: grid;
place-items: center;
//Set any color you wish for testing purposes.
border : 3px solid red;
}
我们都准备好了，孩子们😆👌
1级
适合初学者的水平XD
HTML
<div class="container">
<div class="box-1">Header</div>
<div class="box-2">Main</div>
<div class="box-3">Footer</div>
</div>
SCSS
.container{
display: grid;
height: 100vh;
// The Main Sauce. It means, define --
// [.box-1 auto] [.box-2 1fr unit] & [.box-3 auto]
grid-template-rows: auto 1fr auto;
//Defining gap between rows.
grid-gap: 10px;
}
二级
HTML
<div class="container">
<div class="box-1">Left</div>
<div class="box-2">Right</div>
</div>
SCSS
大屏幕
.container{
display: grid;
height: 100vh;
// Dividing the Width of screen
// in 12 equal fractions.
grid-template-columns: repeat(12,1fr);
grid-gap: 10px;
}
在选择 grid-columns 覆盖的列数时，你可能会感到困惑。不必担心，只需加 1 即可。在本例中，我们希望 .box-1 覆盖 4 列。因此，我们写成 1/5。像这样 👇
.box-1{
// Cover 4 columns.
//So, start = 1 || end = 4+1 = 5;
// grid-column : start/end; 👈 Short-Hand
grid-column: 1/5;
}
.box-2{
// Cover remaining columns.
//This value 👇 is taken from .box-1 ☝️
//So, start = 5 || end = 12+1 = 13;
// grid-column : start/end; 👈 Short-Hand
grid-column: 5/13;
}
适用于手机屏幕
// The Media query mixin we defined at start.
//Took (mobile) 👇 from $bp;
@include query(mobile){
.container{
// Defining that, make the column 1 piece/100%;
grid-template-columns : 100%; //or, write 1fr
//Defining that, make 2 rows, 1fr (fraction) each,
grid-template-rows : repeat(2,1fr);
}
// To remove the previously defined values
.box-1,.box-2{
//inherit defines the original value.
grid-column: inherit;
}
}
让我们用网格模板区域来改变游戏规则😎
说实话，有了网格模板区域，生活真的轻松多了。它让我们能直观地看到自己在做什么。
3级
HTML
<div class="container">
<div class="box-1">A</div>
<div class="box-2">B</div>
<div class="box-3">C</div>
</div>
SCSS
适用于更大的屏幕
.container{
display: grid;
height: 100vh;
// Creating a 12 column X 3 row grid 👇
// Defining that 'a' takes 12 columns & 1 row ||'b' takes 8 columns, 2rows || 'c' takes 4 columns, 2rows,
// There is a high chance to get lost here,
// so, divide the areas in 3 columns with blank spaces 👇
grid-template-areas:
"a a a a a a a a a a a a"
"b b b b b b b b c c c c"
"b b b b b b b b c c c c";
grid-gap: 10px;
}
.box-1{
grid-area: a;
}
.box-2{
grid-area: b;
}
.box-3{
grid-area: c;
}
适用于手机屏幕
@include query(mobile){
.container{
grid-template-areas:
"a a a a a a a a a a a a"
"a a a a a a a a a a a a"
"b b b b b b b b b b b b"
"b b b b b b b b b b b b"
"b b b b b b b b b b b b"
"b b b b b b b b b b b b"
"c c c c c c c c c c c c";
}
}
4级
HTML
<div class="container">
<div class="box-1">A</div>
<div class="box-2">B</div>
<div class="box-3">C</div>
<div class="box-4">D</div>
<div class="box-5">E</div>
</div>
SCSS
适用于更大的屏幕
.container{
display: grid;
height: 100vh;
grid-template-areas:
"a a a a a a a a a a a a"
"b b b b b b b b e e e e"
"b b b b b b b b e e e e"
"c c c c d d d d e e e e";
grid-gap: 20px;
}
.box-1{
grid-area: a;
}
.box-2{
grid-area: b;
}
.box-3{
grid-area: c;
}
.box-4{
grid-area: d;
}
.box-5{
grid-area: e;
}
对于移动屏幕：
@include query(mobile){
.container{
grid-template-areas:
"a a a a a a a a a a a a"
"b b b b b b b b b b b b"
"b b b b b b b b b b b b"
"c c c c c c d d d d d d"
"e e e e e e e e e e e e";
}
}
儿子，你赢了吗？让我们火力全开🥵
5级
HTML
<div class="container">
<div class="box-1">A</div>
<div class="box-2">B</div>
<div class="box-3">C</div>
<div class="box-4">D</div>
<div class="box-5">E</div>
<div class="box-6">F</div>
</div>
SCSS
对于桌面
.container{
display: grid;
height: 100vh;
grid-gap:10px;
grid-template-areas:
"a a a a a a a a a a a a"
"c c b b b b b b b b e e"
"c c d d d d d d d d e e"
"c c d d d d d d d d e e"
"c c d d d d d d d d e e"
"f f f f f f f f f f f f";
}
.box-1{
grid-area: a;
}
.box-2{
grid-area: b;
}
.box-3{
grid-area: c;
}
.box-4{
grid-area: d;
}
.box-5{
grid-area: e;
}
.box-6{
grid-area: f;
}
对于平板电脑
@include query(tablet){
.container{
grid-template-areas:
"a a a a a a a a a a a a"
"b b b b b b b b b b b b "
"c c d d d d d d d d d d"
"c c d d d d d d d d d d"
"c c d d d d d d d d d d"
"e e f f f f f f f f f f";
}
}
适用于手机屏幕
@include query(mobile){
.container{
grid-template-areas:
"a a a a a a a a a a a a"
"b b b b b b b b b b b b "
"d d d d d d d d d d d d"
"d d d d d d d d d d d d"
"d d d d d d d d d d d d"
"c c c c c c c c c c c c"
"e e e e e e e e e e e e"
"f f f f f f f f f f f f";
}
}
阅读下文：
致谢：
结论
这是您成功完成 CSS 网格模型/系统的奖牌🎖️。❤️
非常感谢您的建议和批评❤️️
-
Youtube /乔伊·沙希布
-
Twitter /JoyShaheb
-
Instagram /JoyShaheb