zoukankan html css js c++ java

[CSS] Grid: X: justify-content, Y: align-items, X & Y: place-content

html:

  <body class="container">
    <header class="header item">
      header
    </header>
    <nav class="nav item">nav</nav>
    <div id="app" class="content item">
      content sergsre sger
    </div>
    <footer class="footer item">
      footer
    </footer>
  </body>

css:

.container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 60px minmax(auto, 300px) 160px;
  grid-gap: 20px 10px;
  grid-template-areas:
    "header header"
    "nav content"
    "footer footer";
}

.header {
  grid-area: header;
  display: grid;
  /*justify-content: X axis alignment*/
  justify-content: center;
}

.nav {
  grid-area: nav;
}

.content {
  grid-area: content;
  display: grid;
  /*align-items: Y axis alignment*/
  align-items: center;
}

.footer {
  grid-area: footer;
  display: grid;
  /*place-content: X & Y axis alignment*/
  place-content: center;
}

.item {
  border: 5px solid black;
}

查看全文

相关阅读:
本周学习进度
 梦断代码阅读笔记01
站立会议06（第二期）
计算机软件方面的面试题？
算法Bai-Piao
哈希表
 关于编写代码的一些建议
 使用Promise
Lintcode
搭建Android浏览器壳子

原文地址：https://www.cnblogs.com/Answer1215/p/14549606.html