当前位置：文江博客话题详情

grid如何固定宽度布局？

发布于 2022-09-30 23:06:58 字数 498 浏览 25 评论 0

把整个设置成grid，如何将 left、right设置成固定100px宽度，center为自适应？

<div class="grid">
        <div id="header">#header</div>

            <div id="left" class="column">#left</div>
            <div id="center" class="column">#center</div>
            <div id="right" class="column">#right</div>
  
        <div id="footer">#footer</div>
 
    </div>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

吾家有女初长成 2022-10-07 23:06:58

可以用calc，把宽度减去两个100px从而让浏览器自己去计算:

<div class="grid">
    <div id="header">#header</div>
    <div id="left" class="column" style="width:100px">#left</div>
    <div id="center" class="column"  style="width:calc(100% - 200px)">#center</div>
    <div id="right" class="column" style="width:100px">#right</div>  
    <div id="footer">#footer</div>
</div>

希望能帮助到你。

聊慰 2022-10-07 23:06:58

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html, body {
      margin: 0;
    }

    .grid {
      display: grid;
      grid-template-columns: 100px 1fr 100px;
      grid-template-rows: min-content 1fr min-content;
      height: 100vh;
      width: 100vw;
    }

    #header, #footer {
      grid-column-start: 1;
      grid-column-end: 4;
      height: 200px;
      background-color: rgba(0, 0, 0, .4);
    }

    #left {
      background-color: cornflowerblue;
    }

    #center {
      background-color: lightgray;
    }

    #right {
      background-color: orangered;
    }
  </style>
</head>
<body>
<div class="grid">
  <div id="header">#header</div>

  <div id="left" class="column">#left</div>
  <div id="center" class="column">#center</div>
  <div id="right" class="column">#right</div>

  <div id="footer">#footer</div>

</div>
</body>
</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

qq_Yqvrrd

文章 0 评论 0

2503248646

文章 0 评论 0

浮生未歇

文章 0 评论 0

养猫人

文章 0 评论 0

第七度阳光i

文章 0 评论 0

新雨望断虹

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文