3個元素的css網格對齊

我有3個元素，我決定讓它們使用CSS網格自適應。3個元素的css網格對齊

<div class="elements-wrapper"> 

    <div class="element-1"></div> 
    <div class="element-2"></div> 
    <div class="element-2"></div> 

</div>

寫這個CSS代碼

.elements-wrapper{ 
    position: relative; 
    clear: both; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    grid-gap: 60px; 
    margin-bottom: 10%; 
}

一切正常，但在小屏幕上1200之後的某處第三個元素被釋放至底部，位於左側或右側邊緣。

| element1 | | element2 | or | element1 | | element2 | 
| element3 |          | element3 |

而我希望在中心。那麼關於那種需求。

| element1 | | element 2 | 
     |element 3 |

來源

2017-10-13 hamona

你看這個問題？ https://stackoverflow.com/questions/46276793/how-to-center-elements-on-the-last-row-in-css-grid –

可能的重複[如何將CSS Grid中最後一行的元素居中？]（https://stackoverflow.com/questions/46276793/how-to-center-elements-on-the-last-row-in-css-grid） –

從您的問題中不清楚元素寬度是否在手之前是已知的。

由於您聲明問題與1200的最大寬度有關，我認爲它是，以便您可以在媒體查詢中使用不同樣式處理此問題。

在這種情況下，這可能是一個解決方案：

.elements-wrapper{ 
 
    position: relative; 
 
    clear: both; 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
 
    grid-gap: 60px; 
 
    margin-bottom: 10%; 
 
} 
 

 
.element-1 { 
 
    background-color: tomato; 
 
    height: 50px; 
 
} 
 

 
.element-2 { 
 
    background-color: lightblue; 
 
    height: 50px; 
 
} 
 

 
.element-3 { 
 
    background-color: lightgreen; 
 
    height: 50px; 
 
    grid-column-start: 1; 
 
    grid-column-end: 3; 
 
    width: 300px; 
 
    margin: auto; 
 
}

<div class="elements-wrapper"> 
 
    <div class="element-1"></div> 
 
    <div class="element-2"></div> 
 
    <div class="element-3"></div> 
 
</div>

來源

2017-10-13 18:22:14 vals

3個元素的css網格對齊

回答

相關問題