搜索
搜索

为什么我的嵌套网格容器不能创建等宽的列？

Amandeep Pasricha 发表于 Dev
71
阿曼迪普（Amandeep Pasricha）

所以我是CSS网格的新手，并且一直在研究它。我正在尝试查看我是否可以在一般意义上将该模型的布局与我编写的一些实验代码相匹配：https : //ibb.co/GFYqMRx

这是我的HTML： 

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body class="body">


    <div class="header">Header</div>
    <div class="side-navigation">Side Navigation</div>

    <main class="main">
      <div class="item search">Search</div>
      <div class="item traffic">Traffic</div>
      <div class="item daily-traffic">Daily Traffic </div>
      <div class="item mobile-users">Mobile Users</div>
      <div class="item social-stats">Social Stats</div>
      <div class="item new-members">New Members</div>
      <div class="item recent-activity">Recent Activity</div>
      <div class="item message-user">Message User</div>
      <div class="item settings">Settings</div>
    </main>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> 
    <script src="app.js"></script>
  </body>
</html>

这是我的CSS：

* {
  box-sizing: border-box;
}
.item {
  border: 1px red solid;
}

.header {
  background-color: purple;
  grid-area: header;
}
.side-navigation {
  background-color: orange;
  grid-area: side-navigation;
}
.main {
  background-color: grey;
  grid-area: main;
}

.search {
  grid-area: search;
}
.traffic {
  grid-area: traffic;
}
.daily-traffic {
  grid-area: daily-traffic;
}
.mobile-users {
  grid-area: mobile-users;
}
.social-stats {
  grid-area: social-stats;
}
.new-members {
  grid-area: new-members;
}
.recent-activity {
  grid-area: recent-activity;
}
.message-user {
  grid-area: message-user;
}
.settings {
  grid-area: settings;
}
body {
  display: grid;
  grid-template-rows: 80px 80px 1fr;
  grid-template-areas: 
  "header"
  "side-navigation"
  "main";
}


@media (min-width: 769px) {

  body {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 80px 1fr;
    grid-template-areas:
    "header header"
    "side-navigation main"
  }
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  } 
}

我首先能够通过操纵网格线来创建所需的布局，但是我想看看是否可以仅通过使用grid-template-areas属性来做同样的事情。

对于大于769px的屏幕，我将嵌套的主容器分为两列，每列1fr，但是最终由于安装了第三列而产生了一些奇怪的效果： 在此处输入图片说明

为什么我无法在嵌套的主容器中创建等宽的列？如果我将两个fr单位放入grid-template-columns，是否不应该将我的网格平均分成两半？

直到我将网格应用于嵌套的主容器之前，一切都运行良好。

为什么我的网格项目会像这样在屏幕底部混杂在一起？

米歇尔

这是因为您要在不使用main的grid-area属性的情况下随主网格一起为元素提供网格区域。我已在代码段中删除了这些内容，并且主网格显示有2个相等的列：

* {
  box-sizing: border-box;
}

.item {
  border: 1px red solid;
}

.header {
  background-color: purple;
  grid-area: header;
}

.side-navigation {
  background-color: orange;
  grid-area: side-navigation;
}

.main {
  background-color: grey;
  grid-area: main;
}

.search {}

.traffic {}

.daily-traffic {}

.mobile-users {}

.social-stats {}

.new-members {}

.recent-activity {}

.message-user {}

.settings {}

body {
  display: grid;
  grid-template-rows: 80px 80px 1fr;
  grid-template-areas: "header" "side-navigation" "main";
}

@media (min-width: 769px) {
  body {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 80px 1fr;
    grid-template-areas: "header header" "side-navigation main"
  }
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  }
}
<body>
  <div class="header">Header</div>
  <div class="side-navigation">Side Navigation</div>

  <main class="main">
    <div class="item search">Search</div>
    <div class="item traffic">Traffic</div>
    <div class="item daily-traffic">Daily Traffic </div>
    <div class="item mobile-users">Mobile Users</div>
    <div class="item social-stats">Social Stats</div>
    <div class="item new-members">New Members</div>
    <div class="item recent-activity">Recent Activity</div>
    <div class="item message-user">Message User</div>
    <div class="item settings">Settings</div>
  </main>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script src="app.js"></script>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么我不能用网格创建列？

为什么我的网格容器不能按我希望的方式放置网格？

为什么我的图像不能与网格列的底部对齐？

为什么我不能使用嵌套的 IntList 创建对象？

为什么嵌套的行/列超出容器

为什么我不能ping我的Docker容器？

为什么我不能创建新颜色

为什么我不能创建本体？

为什么我不能创建对象实例？

为什么我不能创建Java列表？

为什么我不能创建我创建的对象的数组？

为什么我不能将容器连接到Docker网络？

为什么我的盒子不能弯曲到容器的末端？

为什么我不能在IF语句中嵌套SUBSTITUTE？

为什么我不能访问嵌套函数内的变量？

为什么我的PowerShell模块不能正确导出成员，为什么不能导出嵌套模块？

为什么尽管有多个网格项，我的网格容器仍无法展开？

为什么我不能应用函数使用dplyr使用mutate（）创建新列？

为什么我不能执行我创建的脚本

为什么我不能为这个表创建外键？

为什么我不能以这种方式创建表？

为什么我不能创建一个Maven项目？

为什么我不能为新的select元素创建ID？

为什么我不能创建window的新实例？

为什么我不能通过 javascript 创建标签

为什么我不能创建一个新分区？

为什么我不能在sqlite中创建视图？

为什么我不能创建无效箭头功能？

为什么我不能从图像阵列创建图像

TOP 榜单

  1. 1

    Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

  2. 2

    使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

  3. 3

    SQL Server中的非确定性数据类型

  4. 4

    Swift 2.1-对单个单元格使用UITableView

  5. 5

    如何避免每次重新编译所有文件？

  6. 6

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  7. 7

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  8. 8

    应用发明者仅从列表中选择一个随机项一次

  9. 9

    在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

  10. 10

    HttpClient中的角度变化检测

  11. 11

    在Wagtail管理员中，如何禁用图像和文档的摘要项？

  12. 12

    如何了解DFT结果

  13. 13

    Camunda-根据分配的组过滤任务列表

  14. 14

    错误：找不到存根。请确保已调用spring-cloud-contract：convert

  15. 15

    为什么此后台线程中未处理的异常不会终止我的进程？

  16. 16

    构建类似于Jarvis的本地语言应用程序

  17. 17

    使用分隔符将成对相邻的数组元素相互连接

  18. 18

    您如何通过 Nativescript 中的 Fetch 发出发布请求？

  19. 19

    通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

  20. 20

    使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

  21. 21

    使用 text() 獲取特定文本節點的 XPath

热门标签

归档