仅适用于移动应用程序磁贴主页 CSS + HTML 的简单 GRID 布局

Question

我想在我的移动应用主页上有一个网格布局，并且我想在不使用 3rd 方库的情况下做到这一点。

我在网上找到了一些示例，但它们似乎都有缺陷：它们的高度是固定的，就我而言，我希望拥有整个事物的高度和宽度以拥有实际的全屏空间正在运行的移动设备。

我希望它在所有平台上的外观：

上面的图片是一个幸运的场景，所有东西都排成一行，但是一旦我将 png 图像添加到图块中，它就会消失。

这是我的尝试：

.tileCollector {
	padding-left:3px;
	padding-right:3px;
	width: 100%;
	height:100%;
	table-layout: fixed;
}

.homepageStatus {
	background-color: #4d82b8; /*var(--color5);*/
	height:100%;
	padding:30px;
}

.StatusMessage1 {
	display:block;
	padding-left: 1.0vh;
	font-size: calc(1em + 5vmin);
	line-height:1.5em;
	white-space:nowrap;
	font-family: 'Open-Sans';
	color:white;
}

.StatusMessage2 {
	display:block;
	padding-left: 1.0vh;
	font-size: calc(1em + 5vmin);
	line-height:1.5em;
	white-space:nowrap;
	font-family: 'Open-Sans';
	color:white;
}

.StatusMessage3 {
	display:block;
	padding-left:1.0vh;
	font-size: calc(1em + 5vmin);
	line-height:1.5em;
	white-space:nowrap;
	font-family: 'Open-Sans';
	color:white;
}

.tileIcon {
	padding-top:30px;
	color:white;
	height:50%;
}

.tileContainer {
	padding:5px;
}

.tile {
	font-size: 30px;
	color:white;
	width: 100%;
    height: 100%;
}

div#tileTopLeft {
	background-color: #FFC000; /*var(--color1);*/
}
div#tileTopRight {
	background-color: #92D050; /*var(--color2);*/
}

div#tileBottomLeft {
	background-color: #A6A6A6; /*var(--color3);*/
}

div#tileBottomRight {
	background-color: #FF5050; /*var(--color4);*/
}

.tile-icon-label {
	font-family:'Oswald';
}

<table class="tileCollector">
  <tr colspan=2 height="40%">
    <td colspan=2 class="tileContainer" id="StatusContainer">
      <div id="homepageStatusDiv" class="homepageStatus">
        <span class="StatusMessage1">Message 1</span>
        <span class="StatusMessage2">Message 2 </span>
        <span class="StatusMessage3">Message 3</span>
      </div>
    </td>
  </tr>
  <tr height="30%" >
    <td class="tileContainer">
      <div class="tile" id="tileTopLeft" ng-click="">
        <table style="width:100%;height:100%;">
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <img class="tileIcon" src="icons/frontpage/icon1.png" class="contrast"/>
            </td>
          </tr>
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <span class="tile-icon-label">Option 1</span>
            </td>
          </tr>
        </table>
      </div>
    </td>
    <td class="tileContainer">
      <div class="tile" id="tileTopRight">
        <table style="width:100%;height:100%;">
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <img class="tileIcon" src="icons/frontpage/icon2.png" class="contrast"/>
            </td>
          </tr>
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <span class="tile-icon-label">Option 2</span>
            </td>
          </tr>
        </table>
      </div> 
    </td>
  </tr>
  <tr height="30%">
    <td class="tileContainer">
      <div class="tile" id="tileBottomLeft">
        <table style="width:100%;height:100%;">
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <img class="tileIcon" src="icons/frontpage/icon3.png" class="contrast"/>
            </td>
          </tr>
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <span class="tile-icon-label">Option 3</span>
            </td>
          </tr>
        </table>
      </div>
    </td>
    <td class="tileContainer">
      <div class="tile" id="tileBottomRight">
        <table style="width:100%;height:100%;">
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <img class="tileIcon" src="icons/frontpage/icon4.png" class="contrast"/>
            </td>
          </tr>
          <tr style="width:100%; height:100%;">
            <td style="width:100%; height:100%;" align="center">
              <span class="tile-icon-label">Option 4</span>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

此外，每个图块内都会有 PNG 图像，就在中间，在“选项 #”文本的上方。我希望这些也可以像文本一样调整大小和响应。 这可能吗？

我应该完全放弃表格的想法并使用 div，还是没有实际区别？

Answer 1

我认为 flexboxgrid 可能是您的解决方案。您可以在此处阅读/了解有关网格的更多信息：http://flexboxgrid.com/ :) 祝你好运！