用网格内容填充文本

Question

我在CSS中使用网格布局，并且具有跨度，底部具有网格。 我的网格的每个单元格都有居中的内容，我想在文本的左右两边添加填充，以使其与两侧的单元格内容对齐。 我想要一个完整的CSS解决方案，但是我不确定是否有可能...

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
<div class="grid-container grid-container--fill">
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
  <div class="grid-element">
    <div class="inner">
    </div>
  </div>
</div>

如果您想尝试一些东西，这里是一个jsfiddle： https://jsfiddle.net/s4Lxwrm5/

Answer 1

您在这里结识伙伴：

application.properties

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.container {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	overflow: auto;

	background-color: grey;
}
	.container-inner {
		width: 100%;
		max-width: 1248px; /* SET YOUR MAX WIDTH */
		height: auto;
		margin: 0 auto;
		padding: 20px; /* SET YOUR PADDING */
		position: relative;
		display: block;
		overflow: auto;

		background-color: orange;
	}
		.text-container {
			width: 100%;
			height: auto;
			margin: 0 auto 20px auto;
			padding-left: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
			padding-right: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
			position: relative;
			text-align: justify;

			background-color: red;
		}
		.supporting-boxes {
			width: 100%;
			height: auto;
			position: relative;
			display: grid;
			grid-template-columns: repeat(auto-fill, 25%);

			background-color: green;
		}
			.grid-box {
				width: 80%; /* LEAVING 10% PADDING */
				height: auto;
				min-height: 200px;
				position: relative;
				justify-self: center;

				background-color: purple;
			}
				.box-content {
					width: 100%;
					height: auto;
					text-align: center;

					position: absolute;
					top: 50%;
					left: 50%;
					-ms-transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);

					background-color: pink;
				}

这是非常易变的代码，如果您要更改盒子和东西的数量，我们可能需要寻找其他解决方案。