Question

所以我想知道如果行没有填满，display: grid是否有可能将其项目放在中心，就像一个flexbox。

示例：

for (let i = 0; i < 3; i++)
{
 
  $("#main").append($("<div class='item'>test</div>"))
  $("#flex").append($("<div class='flex-item'>test</div>"))
}

#main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.item {
  border: 1px solid black;
  height: 100px;
}


#flex {
  display: flex;
  width: 100%;
  justify-content: center;
}

.flex-item {
  
}

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

Answer 1

在public static void main(String[] args) { test("2.22"); test("2"); test(""); } public static void test(String s) { if (checkIfNumber(s) && (s != null || !s.isEmpty())) { System.out.println("number is entered"); } else { System.out.println("number was not entered"); } } private static boolean checkIfNumber(String s) { try { Double.parseDouble(s); } catch (NumberFormatException ex) { //provide a pop up here if required JOptionPane.showMessageDialog(null, "You did not enter a valid number or the input was empty"); return false; } return true; }中应用auto代替1fr。然后为您的商品应用所需的宽度。它会产生预期的结果。

grid-template-columns

DEMO

<强>更新

如果您不想修改列宽，请使用#main { display: grid; grid-template-columns: repeat(6, auto); width: 100%; height: 100%; align-items: center; justify-content: center; } .item { border: 1px solid black; height: 100px; width:100px; }根据您的屏幕应用动态宽度。

vw

DEMO

如果行未满，则使用css网格来证明内容中心

1 个答案: