使用CSS网格在网格中排列一些HMTL元素
使用CSS网格在网格中排列一些HMTL元素
提问于 2021-08-01 16:37:10
我需要一些CSS代码的帮助，这将帮助我安排一些HTML元素在网页上以某种方式使用CSS网格。我需要排列这些元素的方式显示在包括的图像中。可以看到，我有一个有两列的网格--左列占浏览器窗口宽度的2/3，右边一列占浏览器窗口宽度的1/3。在右边的列中，我有一个文本区域，它占用了大部分可用空间，只在两边留下了一个小空间。文本区域的高度应使其占据浏览器窗口的整个高度。左列进一步划分为两列，宽度相等，每列有4行，两列的每一行都有一个按钮元素，边距很小。所有按钮的高度和宽度相同，四行应该占据浏览器窗口的全部高度。请注意，我希望外部网格(带有黑线)占据浏览器窗口的整个宽度和高度，蓝色矩形表示文本区域，绿色矩形表示网格单元格内的按钮元素。谢谢你的帮助。
到目前为止，我尝试过的代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 2fr 1fr;
height: fit-content;
/* Set implicit rows */
}
.main {
display: grid;
height: auto;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
}
.bodes {
display: grid;
height: auto;
grid-template-rows: repeat(5, auto);
}
.textAreas {
height: 100vh;
width: auto;
}
.btn {
height: 30px ;
}
</style>
</head>
<body>
<div class="outer-grid">
<div >
<div class="bodes">
<button class="btn">A</button>
<button class="btn">A</button>
<button class="btn">A</button>
<button class="btn">A</button>
<button class="btn">A</button>
<button class="btn">A</button>
<button class="btn">A</button>
<button class="btn">A</button>
</div>
</div>
<div>
<textarea class="textAreas" ></textarea>
</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-01 17:37:55
您可以将所有元素作为兄弟元素放置在外部容器元素中。然后使用网格模板区域将它们放置在DOM中，使用每个唯一选择器上的网格区域作为对自身的引用。
通过使用分数度量单位，您不需要定义子元素的width和height，因为它们将占用父母宽度/高度的分数值。因此，如果有4行，则每个grid-template-rows上的1 fr将意味着孩子将占用父母身高的25%，即100vh 100 => E 119视图高度<代码>E 220 => <代码>E 121100/4=25%<代码>E 222
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer-cont {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-auto-flow: row;
grid-template-areas: "one two text-area" "three four text-area" "five six text-area" "seven eight text-area";
height: 100vh;
width: 100vw;
}
.text-area {
grid-area: text-area;
padding: 1rem;
}
.btn {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
.five {
grid-area: five;
}
.six {
grid-area: six;
}
.seven {
grid-area: seven;
}
.eight {
grid-area: eight;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="outer-cont">
<div class="text-area">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed nibh ut eros viverra molestie. Praesent in neque nec elit aliquet mattis. Praesent dui sapien, placerat vitae dignissim a, dictum eu massa. Nam vel libero sodales, commodo dui ac, porttitor
lacus. Duis tempus rhoncus lacus sit amet ornare. Phasellus pulvinar nibh et metus molestie tempus. Vestibulum ligula nibh, ultricies sed ex non, euismod blandit enim. Sed ac libero non justo maximus sodales sit amet quis augue. Maecenas sit amet
sapien tellus. Vivamus ornare libero urna, sed gravida urna euismod eu. Vestibulum non varius est. Quisque sed arcu finibus, aliquet odio vitae, facilisis enim. Etiam malesuada maximus ante feugiat molestie. Sed elementum dignissim ex ac cursus.
</div>
<button class="one btn">
A
</button>
<button class="two btn">
B
</button>
<button class="three btn">
C
</button>
<button class="four btn">
D
</button>
<button class="five btn">
E
</button>
<button class="six btn">
F
</button>
<button class="seven btn">
G
</button>
<button class="eight btn">
H
</button>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68612441
复制相关文章
相似问题
腾讯云开发者
