我怎么才能把按钮直接放在第一栏的第一段下面呢?我知道这是因为第二段太长了,但我想避免差距.
由于我想让按钮最后在移动(所有堆叠),我不是我真的可以在HTML中移动它.
.text {
max-width: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a b" "c b";
/* grid-auto-rows: minmax(min-content, max-content); this doesn't work either */
column-gap: 24px;
}
p:nth-of-type(1) {
grid-area: "a";
}
p:nth-of-type(2) {
grid-area: "b";
}
.button {
grid-area: "c";
display: inline-flex;
margin-right: auto;
justify-content: center;
align-items: center;
height: 40px;
padding: 0 24px;
text-decoration: none;
color: white;
background: gray;
border-radius: 6px;
}
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore, porro mollitia. Tenetur quibusdam at voluptate aut expedita!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, est asperiores maxime id architecto libero commodi, corrupti sit iusto deserunt quos! Ipsa inventore soluta laudantium repellat culpa! Incidunt, quam eos.</p>
<a href="#" class="button">Click me</a>
</div>