css自适应网格布局效果代码-html代码-BFW代码库

css自适应网格布局效果代码

代码语言：html

代码描述：css自适应网格布局效果代码，使用了css的变量来实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
	margin:2rem;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
}
.DIRG>div {
	padding:1rem;
	color:#fff
}
.DIRG>div:nth-of-type(1) {
	background:orange
}
.DIRG>div:nth-of-type(2) {
	background:hotpink
}
.DIRG>div:nth-of-type(3) {
	background:olivedrab
}
.DIRG>div:nth-of-type(4) {
	background:dodgerblue
}
.DIRG>div:nth-of-type(5) {
	background:slategray
}
.DIRG>div:nth-of-type(6) {
	background:tomato
}
.DIRG>div:nth-of-type(7) {
	background:peru
}
:root {
	--grid-number:auto;
	--grid-gutter:0;
	--grid-col:1;
	--grid-row:1;
	--g.........完整代码请登录后点击上方下载按钮下载查看