html - 如何使用 Repeat 和 Calc 根据 View 宽度生成 Grid 行

Question

我需要根据 View 宽度除以 300 像素来指定网格中的行数。

我也尝试过calc(100%/300)

但在这种情况下，Calc 的值似乎无效

.lct-grid {
  display: grid;
  grid-template-rows: repeat(calc(100% / 300px), auto);
  grid-auto-columns: minmax(200px, 300px);
  grid-auto-flow: column;
}

.lct-item {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: lightblue;
}

<div class="lct-grid">
  <div class="lct-item">
    MyItem
  </div>
  <div class="lct-item">
    MyItem
  </div>
  <div class="lct-item">
    MyItem
  </div>
  <div class="lct-item">
    MyItem
  </div>
  <div class="lct-item">
    MyItem
  </div>
</div>

Answer 1

我通过将隐藏输入元素上的 z-index 设置为媒体查询断点上的特定值，混合使用 CSS 和 jQuery 解决了这个问题。 jQuery 在屏幕调整大小和方向更改时读取此值，然后计算我需要填充网格的行数并设置 grid-template-rows。

The goal was to make jQuery react to the same breakpoints as the CSS without defining them in both places.

$(document).ready(function () {
	handleResize();

	$(window).resize(function () {
		resizeDelay(function () {
			handleResize();
		}, 500, unique);
	});

	//jQuery Mobile
	$(window).on("orientationchange", function (event) {
		handleResize();
	});

	function handleResize() {
		let count = $("#grid").find(".item").length;
		let rows = Math.ceil(count / ($("#grid").width() / 300));

		switch (parseInt($("#media").css("z-index"))) {
			case 0:
			case 2:
				rows = count;
				break;
		}

		$("#grid").css("grid-template-rows", "repeat($row, auto)".replace("$row", rows));
	}

	function resizeDelay() {
		var timers = {};

		return function (callback, ms, uniqueId) {
			if (!uniqueId) {
				uniqueId = unique;
			}

			if (timers[uniqueId]) {
				clearTimeout(timers[uniqueId]);
			}

			timers[uniqueId] = setTimeout(callback, ms);
		};
	}

	var unique = function () {
		return Math.floor((1 + Math.random()) * 0x10000).toString(16);
	}();
});

#grid {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: row;
    grid-row-gap: 10px;
    width: 100%;
}

.item {
    width: 300px;
    text-align: center;
    background-color: teal;
}

@media all and (max-width: 767px) and (orientation:landscape) {
    //styles

    #media {
        z-index: 1;
    }
}

@media all and (min-width: 400px) and (max-width: 1200px) and (orientation: portrait) {
    //styles

    #media {
        z-index: 2;
    }
}

@media all and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
	//styles

    #media {
        z-index: 3;
    }
}

@media all and (min-width: 992px) {
    //styles

    #media {
        z-index: 4;
    }
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

<div id="grid">
	<div class="item">
		Item
	</div>
	<div class="item">
		Item
	</div>
	<div class="item">
		Item
	</div>
	<div class="item">
		Item
	</div>
	<div class="item">
		Item
	</div>
	<div class="item">
		Item
	</div>
	<div class="item">
		Item
	</div>

	<input id="media" type="hidden" />
</div>