使用 html 网格布局跨多行调整列大小 [英] resize column across multiple rows using html grid layout

查看：28
本文介绍了使用 html 网格布局跨多行调整列大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 2 列 3 行的网格布局.

我希望能够调整列宽.我知道我可以使用 resize: horizo​​ntal 但这只会改变一行的宽度.

我想我不能做我想做的事，我需要使用嵌套网格，但我不确定，所以我想检查一下.

<头><风格>.容器 {显示:网格；网格模板列:1fr 1fr；网格模板行:1fr 1fr 1fr；间隙:0px 0px；网格自动流:行；网格模板区域:标志搜索"导航主""日志主";}.标识 {网格区域:标志；}.搜索 {网格区域:搜索；}.nav {网格区域:导航；溢出:自动；调整大小:水平；}.日志 {网格区域:日志；溢出:自动；调整大小:水平；}.主要的 {网格区域:主要；}html,身体，.容器 {高度:100%；边距:0；}/* 仅供演示，无需复制以下代码 */.容器 * {边框:1px纯红色；位置:相对；}.container *:after {内容:属性(类)；位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；显示:网格；对齐项目:居中；对齐内容:居中；}</风格><身体><div class="容器"><div class="logo"></div><div class="search"></div><div class="nav">

<div class="log"></div><div class="main"></div>

</html>

解决方案

你可以用你的结构来做.诀窍是在模板列上使用 auto 1fr 并将可调整大小的元素的初始宽度设置为等于 50vw 来模拟 1fr 1fr> 最初:

PS:我通过删除区域来简化代码，但这不是技巧的一部分，您可以保留它

.container {显示:网格；高度:100vh；网格模板列:自动 1fr；网格模板行:1fr 1fr 1fr；}.日志 {溢出:自动；调整大小:水平；宽度:50vw；}.主要的 {网格行:2/跨度 2；网格列:2；}身体{边距:0；}/* 仅供演示，无需复制以下代码 */.容器 * {边框:1px纯红色；位置:相对；}.container *:after {内容:属性(类)；位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；显示:网格；对齐项目:居中；对齐内容:居中；}

<div class="logo"></div><div class="search"></div><div class="nav">
<div class="log"></div><div class="main"></div>

如果你有内容，你可以这样做:

.container {显示:网格；高度:100vh；网格模板列:自动 1fr；网格模板行:1fr 1fr 1fr；}.日志 {溢出:自动；调整大小:水平；宽度:50vw；}/* 禁用宽度贡献，因此只有日志将定义宽度 */.标识，.nav {宽度:0；最小宽度:100%；}/**/.主要的 {网格行:2/跨度 2；网格列:2；}身体{边距:0；}/* 仅供演示，无需复制以下代码 */.容器 * {边框:1px纯红色；位置:相对；}

<div class="logo">Lorem ipsum dolor sat amet, consectetur .</div><div class="搜索">
<div class="nav">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.

<div class="日志">

<div class="main"></div>

I've got a grid layout with 2 columns and 3 rows.

I want to be able to resize the column widths. I know I can use resize: horizontal but that only changes width for one row.

I'm thinking I can't do what I want and I'll need to use nested grids but I'm not sure so I wanted to check.

<!DOCTYPE html>
<html>

    <head>
        <style>
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr 1fr;
                gap: 0px 0px;
                grid-auto-flow: row;
                grid-template-areas:
                    "logo search"
                    "nav main"
                    "log main";
            }

            .logo {
                grid-area: logo;
            }

            .search {
                grid-area: search;
            }

            .nav {
                grid-area: nav;
                overflow: auto;
                resize: horizontal;
            }

            .log {
                grid-area: log;
                overflow: auto;
                resize: horizontal;
            }

            .main {
                grid-area: main;
            }


            html,
            body,
            .container {
                height: 100%;
                margin: 0;
            }

            /* For presentation only, no need to copy the code below */

            .container * {
                border: 1px solid red;
                position: relative;
            }

            .container *:after {
                content: attr(class);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: grid;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="logo"></div>
            <div class="search"></div>
            <div class="nav">

            </div>
            <div class="log"></div>
            <div class="main"></div>
        </div>
    </body>

</html>

解决方案

You can do it with your structure. The trick is to use auto 1fr on the template columns and set the initial width of the resizable element to be equal to 50vw to simulate the 1fr 1fr initially:

PS: I simplified the code by removing the areas but that's not part of the trick, you can keep it

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.log {
  overflow: auto;
  resize: horizontal;
  width:50vw;
}

.main {
  grid-row:2/span 2;
  grid-column:2;
}

body{
  margin: 0;
}


/* For presentation only, no need to copy the code below */

.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="logo"></div>
  <div class="search"></div>
  <div class="nav">

  </div>
  <div class="log"></div>
  <div class="main"></div>
</div>

If you will have content, you can do it like below:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.log {
  overflow: auto;
  resize: horizontal;
  width:50vw;
}
/* disable the width contribution so only the log will define the width */
.logo,
.nav {
  width:0;
  min-width:100%;
}
/**/
.main {
  grid-row:2/span 2;
  grid-column:2;
}

body{
  margin: 0;
}


/* For presentation only, no need to copy the code below */

.container * {
  border: 1px solid red;
  position: relative;
}

<div class="container">
  <div class="logo"> Lorem ipsum dolor sit amet, consectetur .</div>
  <div class="search"> </div>
  <div class="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div>
  <div class="log"> </div>
  <div class="main"></div>
</div>

这篇关于使用 html 网格布局跨多行调整列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆