标签: grid-layout

我有一个 Grid ，其中包含 Frames 中的一些标签，使其看起来像一张桌子。这个网格被插入一个垂直的盒子中，其中直接子标签正确居中（它们以与网格相同的方式打包在盒子中）。

我的简化代码是这样的：

import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk

window = Gtk.Window()

g = Gtk.Grid()  # this should be in the horizontal center of the window
g.attach(Gtk.Label("This should be centered but it is not."), 0, 0, 1, 1)

b = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
b.pack_start(g, True, False, 0)  # The same behavior with: b.pack_start(g, True, True, 0)
b.pack_start(Gtk.Label("This label is centered as it should be. Try to resize the window."), True, False, 0)

window.add(b)

window.connect("delete-event", Gtk.main_quit)
window.show_all()
Gtk.main() …

我目前正在尝试从自定义元素（取自数据库）创建 Android 网格布局，并且需要有关如何实现它的建议。网格应该有 6 列，并且应该垂直滚动。每个网格元素（Item）都有columnSpan、columnRow、xPosition和yPosition。

这是所需结果的示例：

我尝试使用 GridLayout，但没有适配器支持。我尝试使用网格视图，但无法使其看起来正确。我需要一个强大的解决方案，但此时我迫切需要一个可行的解决方案。

这是一篇旧帖子，其中包含过于复杂的解决方案。有什么改变吗？这个问题有好的解决办法吗？为什么这个问题首先存在？

这就是我需要的:

桌面: B A

移动:

A
B

这是我的HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

它在移动设备上的顺序正确,但在桌面上没有.我尝试了几个指南和帮助材料,但没有运气.在大多数指南中,它们移动的是相同的列,如4或6,所以清楚地理解它有点令人困惑.

我想创建一个页面,其中我的元素显示在网格中.我想逐行对齐项目.我想在视觉上实现以下结果,但我不知道如何:https://codepen.io/shirkit/pen/KvZKOE/

我现在有这个:

var back = ["red","blue","gray","black","green","cyan","brown","magenta"];
var i = 0;

$('#container .card').children().each(function() {
 $(this).css('background-color',back[i++]);
 if (i == back.length) i = 0;
});

#container {
 display: flex;
 flex-direction: row;
}

.card {
 max-width: 200px;
  width: 100%;
}

.card .image {
 height: 150px;
}

.card .text {
 height: 100px;
}

.card .list {
 height: 50px;
}

#z1 .image {
  height: 175px;
}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div …

我开始使用 CSS 网格（非常棒！）。我从最基本的布局开始：移动布局。此外，随着网页的增长，我正在使用媒体查询来更改布局。

现在，我的布局由 3 个区域组成。确切的顺序是内容区、侧边栏区和评论区。该评论区是可选的，甚至有可能不会显示。区域之间有40px的间隙。

这是移动布局css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: 40px;
}

如果评论区不存在，评论区的间隙也不存在，这就是我想要的。

https://jsfiddle.net/p54od8ho/

当页面增长时，我正在更改布局，如下所示：

@media screen and (min-width: 768px) {
  .content {
    grid-area: content;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .comments {
    grid-area: comment;
  }
  .grid {
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto;
        grid-template-areas:
            "content sidebar"
            "comment sidebar";
  }
}

https://jsfiddle.net/g20gtd4z/

40px的差距是因为评论区存在。

但是，当评论区不存在时会发生这种情况：

https://jsfiddle.net/6Lfg55my/1/

如果您注意到，即使评论区不存在，40px 的差距也存在。

我相信一个解决方案是创建一个类，只是为了删除评论区。

.grid.no_comment {
            grid-template-areas:
                "content sidebar"
                ". sidebar";
      }

必须有更好更简单的方法（或者可能没有）。有没有办法，只使用网格选项，当评论区不存在时，差距也消失了？

我想弄清楚如何使网格的两列具有相同的高度。这是我所追求的：

xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx 

X qqqqqqqqqqqqq X X qqqqqqqqqqqqqqq X 

X qqqqqqqqqqqqq X X qqqqqqqqqqqqqqq X 

XX X qqqqqqqqqqqqqqq X 

XX X qqqqqqqqqqqqqqq X 

xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

这是 x 代表网格的边界（显示：网格）而 q 是标签和输入字段的地方。这是 codepen 上的所有代码和相同的链接。

.container {
    font-family: Arial, Helvetica, Sans-Serif;
    color: #666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #666;
    background-color: #fff;
    height: 100%;
}

.outerGrid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr 1fr;
  grid-template-rows: 80px 1fr 1fr 30px;
  grid-gap: 20px;
  grid-template-areas: 
    "title title title title" 
    ". …

我想在 React Native 中创建网格中心菜单，我刚刚阅读了文档并且看起来不错，但是我在为每个网格菜单创建行时遇到了问题

我已经使用复制粘贴代码创建了 3x3 网格 flexbox：

<View style={{
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View>
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'powderblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'skyblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'steelblue'}} />
        </View>
        <View>
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'powderblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'skyblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, …

我是 HTML 和 CSS 的初学者，所以我一直在试验不同的系统，如 Flex 和 CSS Grid。我遇到了无法向网格列内的元素添加填充的问题。有没有什么办法解决这一问题？当我尝试向物理标题本身添加填充时，它不起作用，因为它是显示网格，这是代码：

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
}


header:not(menu, h1, nav){
    display: block;
    padding:500px;

}

只是试图将我的 RecyclerView 水平居中。

这是 XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">



    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"/>


</RelativeLayout>

这里是java代码：

mRecyclerView = findViewById(R.id.recycler_view);
itemLayoutManager = new GridLayoutManager(this, 6);
mRecyclerView.setLayoutManager(itemLayoutManager);
...
mItemAdapter = new ItemAdapter(MainActivity.this, mItemList);
mRecyclerView.setAdapter(mItemAdapter);

当我运行应用程序时，回收器视图左对齐。我究竟需要做什么才能使内容居中，以便左右边距相同，如右侧示例图片所示？

我创建了一个 CSS 网格，每行有 2 列。第一列占宽度的 25%，第二列占宽度的 75%。我已经实现了这个使用

    .grid-container{
             display:inline-grid;
             grid-template-columns: 1fr 3fr;
    }

现在，我想让它具有响应能力，以便当屏幕尺寸减小到超过某一点时，该列应该彼此重叠，并且每一列应该占据宽度容器的 100%。

我在网上遇到的每个解决方案都使其具有响应性，但它​​也会将我的初始列宽从 25%:75% 更改为 50%:50%，我想避免这种情况。任何建议或提示将不胜感激。谢谢大家！