css布局实现grid自适应多列效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现grid自适应多列效果代码

代码标签: 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
        &.........完整代码请登录后点击上方下载按钮下载查看

网友评论0