css CSS网格中心
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css CSS网格中心相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<ul class="main">
<li>
<div class="one">
<p>Facebook</p>
</div>
</li>
<li>
<div class="two">
<p>Dribble</p>
</div>
</li>
<li>
<div class="three">
<i class="fab fa-instagram fa-5x"></i>
<p>Instagram</p>
</div>
</li>
<li>
<div class="four">
<p>GitHub</p>
</div>
</li>
<li>
<div class="five">
<p>Codepen</p>
</div>
</li>
<li>
<div class="six">
<p>Snapchat</p>
</div>
</li>
</ul>
</body>
</html>/* Some Resets */
html{
font-family: 'Roboto', sans-serif;
display: grid;
}
body, ul, li {
margin: 0;
padding: 0;
}
.fa-instagram {
color: white;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"a b c"
"d e f";
}
ul, li {
list-style: none;
}
body, ul {
display: flex;
justify-content: center;
}
ul {
margin-top: 5em;
flex-wrap: wrap;
max-width: 60em;
}
li {
transition: transform .7s;
}
div {
margin: 1.2em;
width: 15em;
height: 15em;
position: relative;
border-radius: 12px;
}
.one {
grid-area: a;
background: #0077b5;
}
.two {
grid-area: b;
background: #ea4c89;
}
.three {
grid-area: c;
background: #e4405f;
align-self: center;
justify-self: center;
}
.four {
grid-area: d;
background: #181717;
}
.five {
grid-area: e;
background:#000000;
}
.six {
grid-area: f;
background: #34a853;
}
li:hover {
transform: scale(1.1);
cursor: pointer;
}
/* p {
text-align: center;
line-height: 200px;
color: white;
font-size: 16px;
} */
/* Responsiveness */
@media (max-width: 850px) {
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"a b"
"c d"
"e f";
}
}
@media (max-width: 580px) {
.main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"a"
"b"
"c"
"d"
"e"
"f";
}
}以上是关于css CSS网格中心的主要内容，如果未能解决你的问题，请参考以下文章