Chrome浏览器中的CSS网格布局似乎无法正常工作，且行数超过1000行 [英] CSS Grid Layout in Chrome seems not to work properly with more than 1000 rows

问题描述

我使用CSS Grid Layout和sticky position技术创建了一个带有固定标题的滑动网格示例。为方便起见，网格内容由一个脚本生成，我认为这很有效。

-hide =falsedata-console =truedata-babel =false>

  function fillGrid（selector，rows）{let cols = 3;让grid = $（selector）; grid.empty（）; // cr header grid.append（$（'< div>）。addClass（'hcr'）。text（'＃'））; // col col headers for（let c = 1; c< = cols; c ++）{grid.append（$（'< div>）.addClass（'hc'）.text（'Column $ {c}` ））; }（for（let r = 1; r <= rows; r ++）{// row header grid.append（$（'< div>）.addClass（'hr'）.text（r））; // cell for for（let c = 1; c< = cols; c ++）{grid.append（$（'< div>）.addClass（'c'）.text（'Cell $ {r}  -  $ {C}`））; }}} $（'＃reload'）。click（e => {var rows = Number.parseInt（$（'＃rows'）.val（））; fillGrid（'＃grid1'，rows）;}） $（document）.ready（function（）{fillGrid（'＃grid1'，10）;}）;  

  body {font-family：'Segoe UI'，sans-serif; font-size：12px;}。grid {display：grid;宽度：600px; height：300px; grid-template-columns：40px 200px 100px 500px;网格自动行：最小内容; border：1px solid #ccc;溢出：滚动; margin-top：20px; background-color：#aaa; margin-right：10px;}。hcr，.hc，.hr {background-color：#ddd; border-right：1px solid #ccc; border-bottom：1px solid #ccc; padding：2px;位置：sticky;}。hcr {top：0;左：0; z-index：1; text-align：center;}。hc {top：0; white-space：nowrap;}。hr {left：0; text-align：center;}。c {padding：2px; border-right：1px solid #ccc; border-bottom：1px solid #ccc; background-color：#fff;}  

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< /脚本>< DIV> < input type =textid =rowsvalue =10/> < input type =buttonid =reloadvalue =Reload/>< / div>< div class =gridid =grid1>< / div>

多达999行的网格完美无缺。当加载超过999行时，只显示999行以上的单元格，而下面的单元格错误地位于999行标题左上方。

同样的例子在Firefox 56和Edge 16（版本16299）中正常工作。

我在哪里错了？

解决方案

好的，由于稳定​​性和内存消耗的原因，1000行（也是1000列）的限制已被有意引入Chrome引擎。网格功能的新版本似乎正在进行中，应该可以解决问题。

来源：

• https://bugs.chromium.org / p / chromium / issues / detail？id = 688640


• https://github.com/w3c/csswg-drafts/issues/1009

I have created an example of a sliding grid with fixed headers, using the "CSS Grid Layout" and "sticky position" technologies. For convenience, the content of the grid is generated by a script, which I think works well.

function fillGrid(selector, rows) {
  let cols = 3;
  let grid = $(selector);
  
  grid.empty();
  
  //cr header
  grid.append($('<div>').addClass('hcr').text('#'));
  
  //col headers
  for (let c = 1; c <= cols; c++) {
    grid.append($('<div>').addClass('hc').text(`Column ${c}`));
  }
  
  for (let r = 1; r <= rows; r++) {
    //row header
    grid.append($('<div>').addClass('hr').text(r));
    
    //cells
    for (let c = 1; c <= cols; c++) {
      grid.append($('<div>').addClass('c').text(`Cell ${r}-${c}`));
    }
  }
}

$('#reload').click(e => {
  var rows = Number.parseInt($('#rows').val());
  fillGrid('#grid1', rows);
})

$(document).ready(function() {
  fillGrid('#grid1', 10);
});

body {
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}

.grid {
  display: grid;
  width: 600px;
  height: 300px;
  grid-template-columns: 40px 200px 100px 500px;
  grid-auto-rows: min-content;
  border: 1px solid #ccc;
  overflow: scroll;
  margin-top: 20px;
  background-color: #aaa;
  margin-right: 10px;
}

.hcr, .hc, .hr {
  background-color: #ddd;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 2px;
  position: sticky;
}

.hcr {
  top: 0;
  left: 0;
  z-index: 1;
  text-align: center;
}

.hc {
  top: 0;
  white-space: nowrap;
}

.hr {
  left: 0;
  text-align: center;
}

.c {
  padding: 2px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="rows" value="10" />
  <input type="button" id="reload" value="Reload" />
</div>
<div class="grid" id="grid1"></div>

Up to 999 rows the grid works perfectly. When more than 999 rows are loaded, only the cells up to row 999 are displayed, while the following cells are incorrectly positioned on the left above the header of row 999.

The same example works correctly in Firefox 56 and Edge 16 (version 16299).

Where am I wrong?

解决方案

Ok, the 1000 rows (and also 1000 columns) limit has been intentionally introduced into the Chrome engine for reasons of stability and RAM consumption. A new version of the Grid functionality seems to be in progress and should solve the problem.

Sources:

• https://bugs.chromium.org/p/chromium/issues/detail?id=688640
• https://github.com/w3c/csswg-drafts/issues/1009

这篇关于Chrome浏览器中的CSS网格布局似乎无法正常工作，且行数超过1000行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！