grid如何固定宽度布局?

哈哈哈
  • 170

image.png

把整个设置成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>
回复
阅读 335
2 个回答

可以用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>

希望能帮助到你。

<!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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏