如何使用CSS Grid和容器类将其放入两列？
使用CSS Grid和容器类将内容放入两列的方法如下：
- 首先，在HTML中创建一个包含内容的容器元素，例如一个div元素。
<div class="grid-container">
<!-- 内容放在这里 -->
</div>- 在CSS中，为容器元素添加display属性，并将其值设置为grid，以启用CSS Grid布局。
.grid-container {
display: grid;
}- 接下来，使用grid-template-columns属性来定义两列的宽度。可以使用绝对单位（如像素）或相对单位（如百分比）来指定宽度。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列宽度相等 */
}- 最后，将内容放入两列中的相应位置。可以使用grid-column-start和grid-column-end属性来指定内容所占的列数。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid-item {
grid-column-start: 1; /* 内容开始于第一列 */
grid-column-end: 2; /* 内容结束于第二列 */
}完整的示例代码如下：
<div class="grid-container">
<div class="grid-item">
<!-- 第一列的内容 -->
</div>
<div class="grid-item">
<!-- 第二列的内容 -->
</div>
</div>.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid-item {
grid-column-start: 1;
grid-column-end: 2;
}这样，内容就会被放置在两列中，并且两列的宽度相等。你可以根据需要调整列的宽度和内容的位置。
请注意，以上示例中的代码只是一种实现方式，你可以根据具体需求和设计来调整CSS Grid的属性和样式。
相关·内容
我刚刚开始学习css网格，我遇到了一个问题。我不知道怎么做，但我认为我的代码是好的，bc，它确实验证了( html和css)。我在css中使用网格模板行，但是显示就像它没有被使用或者什么的。如果我将更多的文本添加到我的html块中(例如: header)，那么行将变得更高--因此，即使在网格模板行中，它的作用也像自动的。此外，菜单上方和下面都有空白。我已经为这事纠结了两天了，却找不到问题。我有什么不对的？
.container {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 23.2% 76.8%
浏览 4提问于2018-01-14得票数 3
回答已采纳
1回答
大家好，开发者朋友们。我正在建立一个小的网络项目。我正在尝试实践网格css系统。我目前的问题是在网格单元中使用网格。
这是我的html。" grid -container“类是我的主要网格。我的网站最大的一块将在网格单元中。类配置文件是单元格容器的一部分。我正在尝试使配置文件单元格内也有一个网格。
<!-- <body>
<div class= "grid-container">
<div class="headderItem">headder will be here</div>
&
浏览 0提问于2020-01-03得票数 0
2回答
我需要在不接触HTML的情况下取出右侧列中的元素。目前，最现实的选择似乎是CSS网格布局。如果我的HTML看起来像这样，有没有可能呢？
<div class="parent">
<div class="column1 image"></div>
<div class="column2">
<div class="description"></div>
<div class="additional-i
浏览 5提问于2019-07-09得票数 0
回答已采纳
如何使css网格列比其他列更窄？这一列被设置为填满页面的整个左侧，我试图用width: 10%缩小它，它确实变得更窄了，但是在现在缩小的列和下一列之间仍然留有一个空格，如果我设置了width: 100%，这个空格就会被列填充。我的问题是:我如何摆脱这个空间？行也是如此。
.bodycontainer {
display: grid;
background-color: rgba(0,0,0,0);
width: 100%;
height: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: auto aut
浏览 0提问于2018-09-15得票数 0
1回答
我一直试图在我目前正在开发的Wordpress主题上实现960网格系统。我有一个带有项目缩略图的索引页面，设置为每12列中占4列，使其包含3列缩略图。
但是由于一些无法解释的原因，第三列将不会出现--它将被向下推入两列。
我已经在文本编辑器中创建了一个基本的测试页面，它没有问题，但是当我将它应用到Wordpress时，它只会显示两列。
这是发生问题的wordpress页面：
下面是我在文本编辑器中创建的测试，它按照我希望的方式在wordpress中执行：
<html>
<head>
<link rel="stylesheet" ty
浏览 3提问于2013-12-22得票数 0
回答已采纳
我有一个工作代码(在超文本标记语言/CSS网格中)，它由一个3行2列的css-grid组成。第一行是导航(跨越所有列)，中间是内容(没有跨越所有列)，最后一行是页脚(跨越所有列)。
.body__div--background {
background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color:#555555;
font-family: Verdana;
line-height:
浏览 0提问于2018-01-23得票数 4
回答已采纳
Requirement -使用角质材料激活十字柱拖放，而不阻止cdkDropList中物品的移动/移动。
动态地创建条件- cdkDropList。
试过-
Css翻译-
.cdk-drop-list-receiving {
.drag-box {
transform: translate3d(0px, 0px, 0px) !important;
}
}
指令- cdkDropListSortingDisabled
动态添加用于转换的内联css : translate3d(0px，0px，0px)，同时拖动结果--应用内联css被内置的物质转换代码替换。
示
浏览 1提问于2021-08-11得票数 1
回答已采纳
1回答
我最近一直在玩CSS，并且注意到一些我看不到的答案。假设我将我的页面分割成2列，然后在其下面有一行，另一列(跨两列)。在移动平台上，我希望它们将一个叠加在另一个上面，然后回到上面描述的某个断点后的布局。下面是标记：
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div cla
浏览 1提问于2017-04-12得票数 2
回答已采纳
2回答
在WPF中调整列表视图的大小
、、、、
如何在调整主窗口大小时调整列表视图的大小？
抱歉，编辑错误。
我想设置gridviewcolumn的最小宽度。因此，当调整页面大小时，listview列被设置为最小宽度。有可能吗？
感谢SD
</GridViewColumn>
<GridViewColumn Header="Item">
</GridViewColumn>
<GridViewColumn Heade
浏览 0提问于2009-05-20得票数 1
1回答
我的目标是使用CSS网格布局的两列砖石布局的盒子。给定一个带有子元素的元素：
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
让孩子轮流将自己排序到列中。我的想法是有两个网格区域left和right，并告诉孩子们拆分成它们：
section {
display: g
浏览 1提问于2017-03-09得票数 9
2回答
我对正在使用的一些自定义960‘m类有点不放心。当我使用子容器时会出现问题，而子容器的列只是从主容器的列规则继承宽度。
在我看来，内部单元格(foo + bar)应该是绿色的。这意味着他们应该得到.container-6 .grid-3的规则而不是.container-8 .grid-3的规则
我知道CSS中的!important选项，但我想先研究其他选项，因为如果情况正好相反，这将是一个问题。
<div class="container-8">
<div class="grid-3">
<div clas
浏览 3提问于2014-02-12得票数 3
回答已采纳
我正在使用来自Desandro的。它在火狐上运行得很好，但在Chrome上，它不适用于columnWidth属性。它只显示一个柱砌体。如果没有属性，它就能工作，但是响应开关从两列切换到一列是行不通的。
默认情况下，它应该是两列，在小型设备上应该是一列。我不知道是怎么回事，但现在火狐也不起作用了。
我正在这个上使用它。
jQuery
let $grid = $(".grid").masonry({
itemSelector: ".grid-item",
percentPosition: true,
columnWidth: ".gr
浏览 2提问于2021-02-08得票数 0
2回答
这里的初学者。
自从几天以来，我试着建立一个蚀刻素描板，32盒，16列和16行。我得到的唯一结果是一列32框或一列。我不知道错误在哪里，在脚本中，css或html中，所以我把这三个都包括在文章中。
任何帮助都是非常感谢的！
以下是代码：
document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid');
//const message = document.querySelector('#mess
浏览 4提问于2021-12-21得票数 1
为什么显式地将两个CSS列设置为50%，每个列创建一个超过视口宽度100%的水平滚动？
基本上，当网格设置为下面的css时，它会生成一个两列布局，没有超过视口宽度的强制水平滚动：
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 50%;
grid-template-areas: 'item item';
}
当grid-template-columns更改为显式设置两列宽度时，结果是具有水平滚动的两列布局。
.grid {
grid-template-columns: 50% 50
浏览 0提问于2018-09-17得票数 2
回答已采纳
<Grid x:Name="gv">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
浏览 0提问于2014-10-01得票数 0
1回答
rails新手，也是我第一次尝试使用Gmaps4rails。我正在尝试让地图显示在引导网格列中，占据整个列的高度和宽度。我使用的任何css方法都会导致宽度: 100%；高度: 100%；导致地图不显示。
如何让地图以全宽/全高显示？
我的一个简单测试没有map：
<div class="col-xs-12 col-md-7">
<div id="map" style='width: 100%; height: 100%;'></div>
</div>
浏览 3提问于2014-05-31得票数 0
3回答
我对CSS Grid和Flexbox相当陌生，所以我希望您对从12个网格布局设计开始的最佳方法的意见，该设计看起来像我发现的这些示例：
当使用CSS并试图绘制结构时，当使用grid-column-start和grid-column-end使列跨度更宽(底部容器)时，我遇到了对齐多个网格容器的列的问题：
我做了什么根本不对的事吗？柔性箱更适合这个吗？
首选的是尾风解决方案，但基本的CSS很好。
浏览 8提问于2021-03-22得票数 1
回答已采纳
3回答
我使用新的css网格，如下所示：
#site {
display: grid;
grid-template-columns: 10% 1fr 1fr 1fr 10%;
grid-template-rows: 100px auto;
grid-template-areas:
". header header header ."
". content content sidebar ."
}
所以我有两行5列，但只有3列有内容。我使用模板区域中的点来定义空白。这样做的结果是在左边和右边有一个3列的空白布局。如果我在具有
浏览 11提问于2017-08-06得票数 2
回答已采纳
1回答
我正在尝试在我的离子/角度项目中显示一行中的两列。尽管我使用的是带有一个ion-row和两个ion-col的ion-grid，但第二列的内容在页面上被颠簸下来，堆叠在第一列的下面--这对我来说毫无意义。这是我的HTML：
<ion-grid>
<ion-row style="border: none;" *ngFor="let word of words; let i = index">
<ion-col style="border: none;">{{ word | acrossWor
浏览 18提问于2020-05-27得票数 2
我正在尝试通过使用CSS Grid来模拟的页面。引用的页面有两列。左侧列包含链接，右侧列是每个链接的目标框架；单击链接时，该链接的内容将在右侧列中打开。
我已经研究了该页面背后的代码，我有一些问题：
我想使用CSS Grid创建一个类似的两列布局。我不能从css代码中判断该页面是使用css网格还是其他布局方法。如何打开左列中的链接在右列中打开？我已经被告知，没有办法只使用CSS (参见)来指向另一个带有超链接的CSS Grid单元格。这种效果是通过JavaScript还是jQuery实现的？如果是这样的话，怎么做呢？
所以总结一下，他们如何做到这一点，我能对CSS网格布局单独使用CSS或Jav
浏览 36提问于2018-08-18得票数 1
回答已采纳
我试图弄清楚blueprint css框架是否适合我，在此过程中我遇到了以下问题。问题是，我有两个pre，每个pre都包装在一个带有span-12类的div中，但它们并没有并排显示在两列中，由于某种原因，一列将另一列包装到底部。下面的代码演示了这个问题，如果你把它复制到某个html文件中，它就会正常工作：
<html>
<head>
<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/63795c8bfe31cbbfad726f
浏览 0提问于2009-08-30得票数 0
回答已采纳
1回答
通过引导4，我被要求为桌面定制默认的网格系统，如下所示：
其中，容器和桌面断点为1280 is。
我试过的例子是：
body {
margin-top: 3rem;
}
.l-wrap {
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.grid-item {
width: calc((100% - 50px * 11) / 12);
margin-top: 24px;
margin-right: 50px;
float: left;
}
/* For a 3-col
浏览 2提问于2019-06-04得票数 2
回答已采纳
我试图使css网格结构的第二列中的行高度达到50%。
我有这样的代码：
grid-template-areas: "green red"
"green blue";
grid-template-rows: 100% 50%;
grid-template-columns: 1fr 300px;
但是，该列的第一行更大。其结果是：
我试着补充：
#page > .red { max-height: 50%; }
但这给了我：
如何使第二列中的两行高度达到50%？
JSFIDDLE：
#page
浏览 1提问于2018-03-15得票数 1
回答已采纳
1回答
我创建了这个来展示这个问题。
代码如下：
HTML：
<div id="container">
<div id="left-col">
LEFT
</div>
<div id="right-col1">
RIGHT1
</div>
<div id="right-col2">
RIGHT2
</div>
<div id="right-col3">
RIGHT3
浏览 2提问于2019-03-14得票数 2
回答已采纳
我应该使用12列的css网格。当视图变得更小时，我还应该将表堆栈放在列中。
这在CSS网格中有可能吗？我阅读行包装，我必须使用auto-fill或auto-fit。但是我使用这两种方法中的任何一种，我不能指定12列。
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(12, 1fr);
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
浏览 0提问于2019-01-08得票数 1
回答已采纳
使用Foundation 4，我决定让我网站的导航栏变得粘性。根据我找到的一些示例，我将我的部分包装在a中，并为其提供了"fixed“和”contain to-grid“两个类。固定标记导致向导航栏添加与边距相等的底部填充。当我使用chrome或firefox检查器时，我找不到负责执行此操作的css。我已经在css中添加了一行新行来设置最大高度。这样做最终会删除用于抵消正文内容的页边距。我觉得我不应该添加这个新的css规则。有没有人经历过这种情况，你是如何修复它的？
<div class="contain-to-grid fixed">
<na
浏览 1提问于2013-08-25得票数 0
1回答
我有一个基于ContentControl类型的对象，我想将自定义控件嵌入到它的内容中。下面是代码。
问题是我需要MyContainer有一个MyControl对象的列表，这样它就可以与它们通信，并且每个MyControl都需要一个对其MyContainer的引用。
如何正确地完成这项工作？我看到的一种方法是在MyControl上声明一个附加属性，并将其设置为MyContainer对象的名称，但这似乎是多余的，因为MyCOntrol对象可以搜索可视化树来查找容器。如果搜索是正确的方法，那么我应该将执行搜索的代码放在哪里？在MyControl构造函数中？
感谢您的意见，康斯坦丁
public cl
浏览 0提问于2010-11-05得票数 1
回答已采纳
2回答
我看了一些css响应式网格。我目前正在尝试Unsemantic。我真的不明白它如何管理不同的分辨率，比如400,768,1024，而我们只能使用两种类: grid-XX和mobile-grid-XX。
非语义CSS文件包含关于我上面提到的所有分辨率的媒体查询，但我不知道如何使用它们。
例如，如果我的主页上有两列，我希望它们在1024px或更大时各为50%宽，在640和1024px之间为70%和30%，在400px或更低时为100%宽。
有可能吗？
你知道有什么响应式网格系统更容易理解和使用吗？
浏览 0提问于2013-06-16得票数 0
回答已采纳
我有一个css问题。 我有两个“列”，每个列都包含动态内容+每个列底部的图像。 ? 我希望这些图像块在每一列的底部。我可以使用position:absolute并设置每一列的高度，但我正在寻找一种方法来实现这一点，而不是在列上使用指定的高度。 这个html类似于 <div class="wrapper">
<div class="content">
{text content / dynamic }
<div class="grid"> <!-- imag
浏览 42提问于2021-01-24得票数 0
回答已采纳
我试图通过FlashDevelop编写一种策略游戏，在使用事件(特别是MouseEvents)时会遇到问题。与其说事件正在返回错误，不如说它们什么也不做，甚至没有得到任何跟踪。
我试图在点击时使六边形HexObject图像不可见(这只是一个简单的测试，以查看MouseEvent是否实际工作)。
这是我的密码：
Main.as
package {
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseE
浏览 1提问于2014-04-29得票数 0
回答已采纳
此代码来自于“学习网络设计-- HTML、CSS、JavaScript和网络图形入门指南”一书。所以我想知道
<body>
<div id="container">
<header>…</header>
<main>…</main>
<aside>…</aside>
<footer>…</footer>
</div>
</body>
是否有充分的理由使用
#
浏览 6提问于2021-08-28得票数 0
回答已采纳
我从一个对象生成一个表(使用vue.js)，该对象应该是两列宽的。每个列都来自对象的键和值。这相当于以下实际HTML：
<div id="table">
<div>
<div>
this is something long on the first row
</div>
<div>
short 1st row
</div>
</div>
<div>
<div>
wazaa 2nd ro
浏览 2提问于2019-02-05得票数 7
回答已采纳
我将第一列设置为固定宽度'31px'，但当所有列都变小并通过调整容器大小来调整网格大小时，第一列的get会增加。在feddle示例中，如果您将Title和Age列的大小设置得很小，就像在中一样，然后调整大小，您将看到第一个列的宽度增加。
var ds = new kendo.data.DataSource({
data: createRandomData(50),
schema: {
model: {
fields: {
FirstName: { type: "string" },
Last
浏览 1提问于2016-01-28得票数 0
嗨，伙计们，我这里有两个孩子(在组件StyledCompare上)
<StyledContent
$fullHeight={fullHeight}
$align={align}
$compare={compare}
$className={className}
{...restProps}
>
<StyledCompare> {children} </StyledCompare>
</StyledContent>
当我console.log(子)返回两个不同的对象(每个子对象=
浏览 1提问于2022-07-05得票数 0
我正在使用ag-grid和react
我想要两个滚动条。对于图像中显示的黄线处的每个块
我还想在嵌套级别对数据进行排序，那么列定义应该如何排序呢？
浏览 0提问于2020-11-28得票数 0
2回答
我使用下面的代码创建一个网格，从三列扩展到两列，然后在移动设备上扩展到一列：
grid-template-columns: repeat(auto-fill(minmax(400px,1fr));
它工作得很好，除了在移动设备上，最小设置会导致每一项溢出网格容器(和屏幕)。
有没有其他方法可以写这些列来防止这种情况发生？
即最小400px，除非它溢出父容器
浏览 5提问于2018-01-20得票数 4
下面是我的简单导航代码。我有两个div，当点击右上角的图标时会出现。我还为使用:before实现的顶部的这些分区提供了一个三角提示。对于第一个div，我设置了overflow:scroll，所以三角形的尖端是不可见的。在第二种情况下，它是可见的，因为我没有设置溢出属性。是否有任何工作来显示三角尖端，但也设置溢出属性？
$( document ).ready(function() {
$('html').click(function() {
$(".grid1").hide();
$(".grid2").hide()
浏览 0提问于2015-08-25得票数 0
回答已采纳
如何配置角度UI网格来对列进行居中，使两条线都以中心为中心？
我定义了headerCellClass: text-c和width: 98，在grid.columnDefs中如下所示：
{
name: 'TotalOutstanding',
displayName: 'Total Outstanding',
width: 98,
type: 'number',
cellClass: 'text-c',
headerCellClass: 'text-c'
}
浏览 0提问于2018-08-16得票数 0
回答已采纳
6回答
每次我开始编写一个新的响应性页面时，我都会提出这个问题，所以我想我是在问你们这个问题：“在为页面添加响应性时破坏可读性是正常的吗？”
我想你最好通过一个例子来理解:我在一个12列的网格系统中有2个大的列，所以我用.grid-6类和css .grid-6 {width:50%}设置了2个div。在tablet布局中，图形设计人员放置了三列，因此我将这些列的宽度更改为33%，但现在我有一个包含grid-6类(建议宽度为50% )的div，实际列宽为33%。
所以当我开始研究响应性时，感觉就像是"hacks"..我想过为平板电脑和手机或其他设备(<div class="
浏览 0提问于2012-12-17得票数 0
回答已采纳
1回答
我有以下XAML：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.10*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
浏览 1提问于2014-11-26得票数 1
回答已采纳
我希望创建一个具有固定列和行大小的网格，其中包含可以跨越1、2、3或4列(以及1或2行)的项。
只要.grid足够宽，至少可以容纳与最大项一样多的列，例如.grid是600‘s+ gap，并且有一个跨2列的项，这是很好的。
但是，当网格变得更小时，grid-column: span <more than available columns>列就会折叠(请参阅下面的演示片段)。
问题：是否有一种方法可以说某一项“如果可能的话应该跨越X列，否则X-1列”？因此，在我的示例中，一个“三重”项将只覆盖2列，如果这是可用的。
如果没有，是否有其他更好的方法来处理这个问题？
注意:我知道我可以
浏览 5提问于2022-10-15得票数 -1
我有两个网格列。第一个网格列有两个项目(div-1和div-2)。第二列有一项(div-3)。我想让div-3的高度随着div-1和div-2的变化而调整。 这样两列的高度将与下面的css相同。 <Grid>
<GridItem>
<Grid>
<GridItem >
<SomeComponent className="div-1"/>
</GridItem>
<GridItem >
<SomeComponent className="d
浏览 13提问于2020-01-07得票数 0
1回答
我在一个4列网格容器中有一个自定义的文件输入元素，还有一个16 my的空白，在这里我保存我的输入。我的问题是，当我选择一个长名为"XXXXX02000000SDD000D.pdf"的文件时，我的自定义输入元素变得如此大，以至于line-clamp无法工作，并且溢出了我的网格容器。当我选择具有长名称但使用"my file called my beloved pdf.pdf"等几个单词的文件时，line-clamp会工作，因此我的网格容器不会溢出。这个问题是我的入口还是我的集装箱？
当我选择具有长名称但有多个单词的文件时：
我选择一个没有空格和容器溢出的大
浏览 1提问于2021-05-17得票数 0
回答已采纳
1回答
所以我试着在我的tkinter GUI上放置两个按钮，但似乎设置行和列并不能正常工作。如果我将网格的行/列设置为一个值，按钮将会移动一点，如果我再次尝试设置按钮网格，它将不会再移动。想知道我创建按钮的方式是否影响了网格功能？总而言之，我只是试图定位我的按钮，但我似乎无法让它们移动。
#Play button creation
btnPlay = Button(app, text ="Play", command = playMusic)
btnPlay.grid(row =10, column = 10)
#Pause button creation
btnPause =
浏览 1提问于2015-04-25得票数 0
我正在尝试让CSS网格块堆叠在一起，当在小屏幕上观看时。我知道我可以编写媒体查询来将两列改为一列。但是我认为Grid可以在没有他们的情况下处理这个问题？
我认为我可以通过列上的自动调整来实现这一点。然而，我想我可能误解了这是如何工作的？
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: 1fr 1fr;
grid-template-areas: "leftCol rightTop"
浏览 3提问于2019-07-13得票数 4
我在理解CSS网格行的工作原理时遇到了麻烦。为什么列从左到右扩展，而行不从左扩展？ .grid {
position: absolute;
height: 50vh;
width: 30vw;
border: 1px solid black;
top: calc(50% - 30vh);
left: calc(50% - 15vw);
}
.keys {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.keys&
浏览 1提问于2020-03-27得票数 1
回答已采纳
1回答
我有一个页面中有两个ui网格的要求，如下面的屏幕快照所示
在sorting/filtering中，UI-Grid One：批处理收费应该有自己的，即通过
col.enableFiltering = true;
col.enableSorting = true; // (Typescript code)
网格中的--对于示例、和测试名称列，应该启用了自己的筛选/排序。
但是，除了这一点之外，从List Price列到Net Interco列，过滤/排序应该基于第一个网格。即
如果我对List Price进行排序，那么第二个网格中相应的列也应该得到排序。类似地，当我在NBS Price上使用
浏览 3提问于2016-03-24得票数 1
我正在使用用生成的css网格。为了演示起见，我创建了一个三列网格。这是。
<div class="container_3 clearfix">
<div class="grid_2">
<div class="grid_2 alpha omega highlighted" style="margin-bottom: 20px;">Some content content content content content content content content
浏览 1提问于2014-06-16得票数 0
回答已采纳
1回答
我正在尝试重新创建一个CSS网格布局。当我为每个类名声明grid-area时，网格似乎不想为grid-area: aside;和grid-area: main;正确地呈现。我认为这可能是因为这两个元素嵌套在其他元素中吗？
期望结果：
实际结果：
CSS：
.container {
display: grid;
grid-template-areas: "nav nav"
"aside main"
"foot foot"
浏览 0提问于2017-05-31得票数 1
回答已采纳
1回答
我正在通过免费电子计算器，并试图制造一个电子计算器，还很早期，只是试图使大小和布局正确。
我使用CSS网格的按钮，但有一个问题，当我试图调整按钮的大小。
我有一个javascript函数，它为要显示在计算器上的每个按钮创建一个<button>元素，然后在相应的css网格区域属性中分配以匹配网格。
布局和功能工作得很好，当我试图调整“相等”按钮的大小时，问题就出现了，这个按钮位于第4列和第4行和第5行。
该按钮占用1列，但占网格的2行。
一旦我更改了css中按钮的height属性，这个特定的按钮就会折叠成1列和1行。
希望这是有意义的，如果没有的话，下面是codepen：
而html
浏览 0提问于2017-07-26得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
