css布局实现grid自适应多列效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现grid自适应多列效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'Prata';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/prata/v13/6xKhdSpbNNCT-vWI.ttf) format('truetype');
}
body {
display: grid;
place-content: start center;
background: midnightblue;
color: wheat;
}
.mc {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-flow: column wrap;
width: 90vw;
font: 1rem/1 prata, serif;
margin: 5vmin;
}
.i {
display: grid;
grid-template-columns: auto 1fr 1rem;
gap: 1ch;
padding: 0.5rem;
width: var(--item-width,auto);
height: 2rem;
box-sizing: border-box;
}
.i::before {
content: " ";
-webkit-box-ordinal-group: 2;
order: 1;
border-bottom: thin dotted currentcolor;
height: 1px;
align-self: center;
}
.i::after {
content: " ";
grid-column-end: -1;
-webkit-box-ordinal-group: 3;
order: 2;
background: var(--name);
border-radius: 50%;
border: thin solid currentcolor;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.i:hover::after {
-webkit-transform: scale(2);
transform: scale(2);
border-radius: 0;
}
</style>
</head>
<body>
<div class="mc">
<div class="i" style="--name: aliceblue">
aliceblue
</div>
<div class="i" style="--name: antiquewhite">
antiquewhite
</div>
<div class="i" style="--name: aqua">
aqua
</div>
<div class="i" style="--name: aquamarine">
aquamarine
</div>
<div class="i" style="--name: azure">
azure
</div>
<div class="i" style="--name: beige">
beige
</div>
<div class="i" style="--name: bisque">
bisque
</div>
<div class="i" style="--name: black">
black
</div>
<div class="i" style="--name: blanchedalmond">
blanchedalmond
</div>
<div class="i" style="--name: blue">
blue
</div>
<div class="i" style="--name: blueviolet">
blueviolet
</div>
<div class="i" style="--name: brown">
brown
</div>
<div class="i" style="--name: burlywood">
burlywood
</div>
<div class="i" style="--name: cadetblue">
cadetblue
</div>
<div class="i" style="--name: chartreuse">
chartreuse
</div>
<div class="i" style="--name: chocolate">
chocolate
</div>
<div class="i" style="--name: coral">
coral
</div>
<div class="i" style="--name: cornflowerblue">
cornflowerblue
</div>
<div class="i" style="--name: cornsilk">
cornsilk
</div>
<div class="i" style="--name: crimson">
crimson
</div>
<div class="i" style="--name: cyan">
cyan
</div>
<div class="i" style="--name: darkblue">
darkblue
</div>
<div class="i" style="--name: darkcyan">
darkcyan
</div>
<div class="i" style="--name: darkgoldenrod">
darkgoldenrod
</div>
<div class="i" style="--name: darkgray">
darkgray
</div>
<div class="i" style="--name: darkgreen">
darkgreen
</div>
<div class="i" style="--name: darkgrey">
darkgrey
</div>
<div class="i" style="--name: darkkhaki">
darkkhaki
</div>
<div class="i" style="--name: darkmagenta">
darkmagenta
</div>
<div class="i" style="--name: darkolivegreen">
darkolivegreen
</div>
<div class="i" style="--name: darkorange">
darkorange
</div>
<div class="i" style="--name: darkorchid">
darkorchid
</div>
<div class="i" style="--name: darkred">
darkred
</div>
<div class="i" style="--name: darksalmon">
darksalmon
</div>
<div class="i" style="--name: darkseagreen">
darkseagreen
</div>
<div class="i" style="--name: darkslateblue">
darkslateblue
</div>
<div class="i" style="--name: darkslategray">
darkslategray
</div>
<div class="i" style="--name: darkslategrey">
darkslategrey
</div>
<div class="i" style="--name: darkturquoise">
darkturquoise
</div>
<div class="i" style="--name: darkviolet">
darkviolet
</div>
<div class="i" style="--name: deeppink">
deeppink
</div>
<div class="i" style="--name: deepskyblue">
deepskyblue
</div>
<div class="i" style="--name: dimgray">
dimgray
</div>
<div class="i" style="--name: dimgrey">
dimgrey
</div>
<div class="i" style="--name: dodgerblue">
dodgerblue
</div>
<div class="i" style="--name: firebrick">
firebrick
</div>
<div class="i" style="--name: floralwhite">
floralwhite
</div>
<div class="i" style="--name: forestgreen">
forestgreen
</div>
<div class="i" style="--name: fuchsia">
fuchsia
</div>
<div class="i" style="--name: gainsboro">
gainsboro
</div>
<div class="i" style="--name: ghostwhite">
ghostwhite
</div>
<div class="i" style="--name: gold">
gold
</div>
<div class="i" style="--name: goldenrod">
goldenrod
</div>
<div class="i" style="--name: gray">
gray
</div>
<div class="i" style="--name: green">
green
</div>
<div class="i" style="--name: greenyellow">
greenyellow
</div>
<div class="i" style="--name: grey">
grey
</div>
<div class="i" style="--name: honeydew">
honeydew
</div>
<div class="i" style="--name: hotpink">
hotpink
</div>
<div class="i" style="--name: indianred">
indianred
</div>
<div class="i" style="--name: indigo">
indigo
</div>
<div class="i" style="--name: ivory">
ivory
</div>
<div class="i" style="--name: khaki">
khaki
</div>
<div class="i" style="--name: lavender">
lavender
</div>
<div class="i" style="--name: lavenderblush">
lavenderblush
</div>
<div class="i" style="--name: lawngreen">
lawngreen
</div>
<div class="i" style="--name: lemonchiffon">
lemonchiffon
</div>
<div class="i" style="--name: lightblue">
lightblue
</div>
<div class="i" style="--name: lightcoral">
lightcoral
</div>
<div class="i" style="--name: lightcyan">
lightcyan
</div>
<div class="i.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0