标签: css-grid

我正在尝试使用CSS Grid创建一个简单的页面.

我没有做的是将文本从HTML中心放到相应的网格单元格中.

我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg

我该怎么做呢？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center; …

TL; DR:table-layout: fixed CSS网格有什么相似之处吗？

我尝试创建一个带有大型4x3网格的年视图日历,其中包含7x6网格.

日历应填充页面,因此年份网格容器的宽度和高度均为100%.

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

这是一个有效的例子:https://codepen.io/loilo/full/ryXLpO/

为简单起见,该笔每个月都有31天,周一开始.

我还选择了一个可笑的小字体来演示这个问题:

网格项(=日单元格)非常精简,因为页面上有数百个.一旦日期数字标签变得太大(可以使用左上方的按钮随意使用笔中的字体大小),网格的大小将会增大并超过页面的主体大小.

有什么方法可以防止这种行为吗？

我最初声明我的年度网格在宽度和高度上都是100%,所以这可能是重要的一点,但我找不到任何符合网格的CSS属性.

免责声明:我知道有很简单的方法可以在不使用CSS Grid Layout的情况下设置日历的样式.然而,这个问题更多的是关于该主题的一般知识而不是解决具体的例子.

我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

参数:

• 所有元素都具有相同的宽度
• 元素的高度无法在服务器端计算(图像加上各种文本量)
• 如果必须的话,我可以使用固定数量的列

有这一个简单的解决方案,在现代浏览器,工作的column-count性质.

该解决方案的问题是元素按列排序:

虽然我需要按行排序元素,至少大约:

我试过的方法不起作用:

• 制作物品display: inline-block:浪费垂直空间.
• 制作物品float: left:lol,没有.

现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.

是否有一些新奇的flexbox魔法可以实现这一目标？

是否可以在不使用媒体查询的情况下制作CSS网格包装？

在我的情况下,我有一个非确定数量的项目,我想放在网格中,我希望该网格包装.使用flexbox,我无法可靠地分配好东西.我也想避免一堆媒体查询.

这是一些示例代码:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

这是一个gif:

作为旁注,如果有人能告诉我如何避免指定所有项目的宽度,就像我一样,grid-template-columns这将是伟大的.我希望孩子们指定自己的宽度.

我认为使用Flexbox是不可能实现的,因为每行只能是适合其元素所需的最小高度,但是可以使用较新的CSS Grid实现吗？

为了清楚起见,我希望所有行中网格中的所有元素具有相同的高度,而不是每行.基本上,最高的"细胞"应该决定所有细胞的高度,而不仅仅是其行中的细胞.

我正在为我的网格使用以下HTML标记.

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

SCSS代码如下所示:

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

由于我在我的工作流程中使用自动前缀,因此它会自动添加带有-ms前缀的所有相关属性.我可以通过检查元素确认.

现在,问题是此代码在Chrome,Firefox和Opera中运行良好,但是当我在Microsoft Edge或IE 11中打开此页面时,所有网格项在第一个单元格处相互重叠.根据这个站点,这些浏览器支持带有-ms前缀的CSS Grid布局.我为这个场景创建了一个CodePen.

CodePen链接

为什么不起作用？

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr); …

如何强制css网格容器获取单页应用程序的设备屏幕的整个宽度和高度？修改后的示例来自Mozilla:Firefox文档

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: …

我想创建一个像 . 板子有以下特点

• 角是方形的，比其他盒子大
• 每行的文本都面向特定的角度。

我的基本 html 结构如下

• 木板
  • 第 1 行
    • 瓷砖 1
    • 瓷砖 2 ...

我成功地使用grid-template-areas. 我面临的问题是我无法根据需要旋转每一行的瓷砖。

我创建了一个基本片段，每行只有 3 个图块。第一排朝向直角，所有其他排都朝向错误的角度。90deg对于第二行。180deg对于第三行。和270deg第四行。

我试过使用writing-modeandtransform:rotate()但它不起作用或者我使用它的方式错误。请帮我找到正确的方法。我会很感激

*{
  box-sizing: border-box;
}
#board {
   display: grid;
   /*first and last row and column are bigger than others*/
   grid-template-columns: 100px repeat(2, 70px) 100px;
   grid-template-rows: 100px repeat(2, 70px) 100px;
   
   /*a, b, c, d are 4 rows and o is center*/
   grid-template-areas:
      "c c c d"
      "b …

我试图让我的粘性标题具有过渡效果,因此它可以减轻而不仅仅是快速移动.

我究竟做错了什么？

这是我的工作版本:

http://codepen.io/juanmata/pen/RVMbmr

基本上下面的代码将类添加到我的包装类中,这很好用.

$(window).on('load', function() {
    $(window).on("scroll touchmove", function () {
        $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});

这是CSS部分:

.wrapper {
    grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.tiny {
    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}

所以标题确实缩小了它应该但没有动画,我错过了什么或转换根本不适用于网格？

这是css-grid文档的链接.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

$(window).on('load', function() {
  $(window).on("scroll touchmove", function() {
    $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
  });
});

* {
	margin:0;
	padding:0;
}

.wrapper {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: …

我真的很困惑.在查找在线资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是grid.我不知道Flex-box中等效属性的文档对网格的适用性如何.

所以,我尝试引用https://css-tricks.com/snippets/css/complete-guide-grid/,它定义如下:

justify-items - 沿着行轴对齐网格项内的内容

justify-content - 此属性沿着行轴对齐网格

justify-self - 沿着行轴对齐网格项内的内容

但我仍然不明白它们之间的区别是什么.所以,我有3个问题要澄清.

1. 是justify-items在Flex的框属性相同 justify-items的网格属性？或者它们有什么不同？(换句话说,我可以重用Grid的Flex-box文档)
2. (证明 - )内容,自我和项目有什么作用？
3. 如何(证明 - )内容,自我和项目有何不同？

任何澄清将不胜感激.

编辑:由于每个人都不断给我Flex-box资源,我问的是css-grid,而不是flex-box.