css Css网格中心内容的div

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Css网格中心内容的div相关的知识，希望对你有一定的参考价值。

<!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 href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

    <title>Portfolio</title>
</head>

<body>
    <div class="intro">
      <h1>Hello, My name is Jordi <br> a Healthcare Engineer <br> based in The Netherlands</h1>
    </div>

    <div class="instagram">
      <i class="fab fa-instagram fa-5x"></i>
      <p>Instagram</p>
    </div>

    <div class="snapchat">
      <i class="fab fa-snapchat-ghost fa-5x"></i>
      <p>Snapchat</p>
    </div>
</body>

</html>

/* Some resets */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    
    font-family: 'Montserrat', sans-serif;
}

body { 
    display: grid; 
    grid-template-columns: .5fr 1fr 1fr .5fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    grid-template-areas:
    ". intro intro ."
    ". instagram snapchat .";

    height: 100%;

    background: linear-gradient(135deg, #d94e6f 0%,#cab0c9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d94e6f', endColorstr='#cab0c9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.intro { 
    grid-area: intro;
    justify-self: start;
    align-self: center;

    height: auto;
}

.instagram {
    grid-area: instagram;
    justify-self: center;
    align-self: center;

	height: 15em;
	width: 100%;
    border-radius: 12px;
    
    color:white;
    background-color: #c13584;
}

.snapchat {
    grid-area: snapchat;
    justify-self: center;
    align-self: center;

    height: 15em;
	width: 100%;
    border-radius: 12px;
    
    color:white;
    background-color: #fffc00;
}

以上是关于css Css网格中心内容的div的主要内容，如果未能解决你的问题，请参考以下文章