[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;
}
复制代码

 

 

 

posted @   Zhentiw  阅读(71)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2020-03-17 [React + CSS3] Create an Animate Content Placeholder for Loading State in React
2020-03-17 [HTML5] DOM Nodes Explained
2019-03-17 [Algorithm] Search for matching words
2019-03-17 [Algorithm] Trie data structure
2017-03-17 [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
2017-03-17 [TypeScript] Using ES6 and ESNext with TypeScript
2016-03-17 [AngularJS] Angular 1.5 multiple transclude
点击右上角即可分享
微信分享提示
AI IDE Trae