标签: grid-layout

我的页面顶部有一个导航。其中我有 5 家不同公司的 5 只市场股票。我想以全宽显示 5，但随着窗口变小，我基本上想要的行为是切断溢出的窗口，并调整剩余窗口的大小以填充导航容器（所以假设在某些时候它只会显示 3 只股票并隐藏其他股票）。这是现在的代码：

.stocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  grid-template-rows:1fr;
  grid-auto-rows: 0;
  overflow-y: hidden;
  justify-content: space-between;
  width: 75%;
  font-size: 11px;
  overflow-y: hidden;
}

目前这几乎就是我所需要的。问题是，现在溢出的库存项目（基本上应该创建一个新行）被挤在第一行的顶部。同样，我不希望他们创建新行或可滚动。我只是根本不想让他们出现。有任何想法吗？

在android中,是否可以完全以编程方式从支持库创建GridLayout(即不编写相应的xml)？

我在一个片段(称为PromotionLayoutFragment)中创建我的GridLayout,如下所示:

ViewGroup fragmentView = (ViewGroup)getView(); 
GridLayout gridLayout = new GridLayout(fragmentView.getContext());
gridLayout.setColumnCount(2);
gridLayout.setRowCount(15);
// add views to grid ...
fragmentView.addView(gridLayout);

这在我使用API​​级别14中的GridLayout类时工作正常,但是当我使用支持库(v7-r9)中的GridLayout时,我得到:

08-10 15:54:52.209: ERROR/AndroidRuntime(14687): FATAL EXCEPTION: main
    java.lang.NoClassDefFoundError: android.support.v7.gridlayout.R$dimen
    at android.support.v7.widget.GridLayout.<init>(GridLayout.java:255)
    at android.support.v7.widget.GridLayout.<init>(GridLayout.java:274)
    at android.support.v7.widget.GridLayout.<init>(GridLayout.java:282)
    at net.link.redbutton.fragment.PromotionLayoutFragment.showPromotions(PromotionLayoutFragment.java:168)
    at net.link.redbutton.fragment.PromotionLayoutFragment.onImageResult(PromotionLayoutFragment.java:222)
    at net.link.redbutton.fragment.SchedulerResponseFragment$1.onReceiveResult(SchedulerResponseFragment.java:37)
    at android.os.ResultReceiver$MyRunnable.run(ResultReceiver.java:43)
    at android.os.Handler.handleCallback(Handler.java:605)
    at android.os.Handler.dispatchMessage(Handler.java:92)
    at android.os.Looper.loop(Looper.java:137)
    at android.app.ActivityThread.main(ActivityThread.java:4441)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
    at dalvik.system.NativeStart.main(Native Method)

我使用GridLayout使用库兼容性时遇到问题(没有尝试过).我正在使用app:layout_gravity="fill_horizontal"而不是显示android:layout_gravity="fill_horizontal"内部的所有内容TextView.为了显示所有内容,我必须设置TextView"标题"的高度,但我想要一个动态高度,而不是设置高度.

任何的想法？

在过去的一周里,我一直在拉着我的头发试图找出基本的R编码,但似乎无法到达任何地方(自2013年以来没有使用过R而不是它的一个很好的借口).

我想要的只是一个由32个.png文件组成的4x8网格(我制作的地图),我希望一次不加载一个图像文件(http://www.statmethods.net/advgraphs/layout) .html).

所以我想我可以在文件夹中加载图像(如果我的信念是bs,请纠正我)

img <- list.files(path='c:/a',patt='compo[0-32].*',full.names=T)

然后,我在的线也许在想 par(mfrow=c()),layout,grid.arrange(写PNG地块成R A pdf文件), (grid.raster？如何加入高效多RGL地块成一个单一的情节我已经在读了,并没有相应的试验- )导致任何有价值的东西..

后者我只使用以下结果

这让我傻笑.lattice无论如何,我真的不认为是这样的.

任何帮助将不胜感激!

我在创建一个flexbox响应网格时遇到了问题,并希望有人可以指出我正确的方向.

我希望所有的.blockdiv都是相同的高度,并且.bottomdiv绝对位于底部.这实际上是在当前的解决方案中工作,但是当h2标题太长并且达到2 h2行时,我希望行的所有标题都是相同的高度.

这有可能吗？

我做了一个Codepen来说明问题:http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) { …

我正在尝试将我的Flexbox布局更改为新的display: grid,我有三列.

<div class="grid">
    <div class="three wide column"></div>
    <div class="two   wide column"></div>
    <div class="two   wide column"></div>
</div>

它看起来像这样:

是否可以指定一些列从右侧开始而不是从左侧开始,如下图所示？

(并且没有指定grid-column-start和grid-column-end,这可以通过margin-left: autoFlexbox完成)

<div class="grid">
    <div class="three wide column"></div>
    <div class="right floated two wide column"></div>
    <div class="right floated two wide column"></div>
</div>

我有三列和一行，我想将每个网格元素放入三个结果单元之一。这就是我想要的，使用三个容器元素：

main {
  display: grid;
  grid-template-columns: 33% 33% auto;
  grid-gap: 15px;
}

.container {
  background-color: orange;
}

.element {
  transition: height 0.5s;
  margin: 15px;
  height: 100px;
  background-color: grey;
}

.element:hover {
  height: 200px;
}

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

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

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

我知道使用三个容器可以做到这一点，但是我想避免使用任何并非真正“必需”的东西。

使用多行并将元素从一行扩展到两行或三行不会像我在上面的示例中那样“平滑”。但是，使用多行并仅调整元素的大小会调整整个行的大小，这会影响下一行的位置。

一种解决方案是将同一列的每个元素放入同一单元格中。这样，最多只有一行，而且每次调整元素大小时，它只会影响元素在同一列中的位置，这正是我想要的。

当在同一个单元格中放置多个元素时，问题在于它们保持重叠，而我发现没有办法阻止它们这样做。

那么有没有办法仅使用css-grid布局将多个元素放置在同一单元中而不重叠呢？

我想使用 CSS 网格。像这样的事情我想……

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto [whatever's left of the vh] auto auto;
  position: relative;
}

有没有办法强制网格的最后一行中的所有项目填充行,无论它们有多少？

我不知道网格中的项目数量,因此我无法直接定位它们.我试图使用grid-auto-flow: dense,但它并没有真正帮助.

这是我的问题可视化: :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

我有这个网格 CSS

.grid {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: repeat(3, 1fr);
}

它位于宽度为 500px 的 div 中

但我注意到网格中的第一个项目“拥抱”了 div 的左边缘，但最右边的项目没有接触 div 的边缘。

在 Flexbox 中，我可以通过（接近足够）实现这一点：

.flex {
    display: flex;
    justify-content: space-between;
 }

如何使用网格响应式地执行此操作？

我知道我可以更改网格列间隙，但这看起来很不稳定