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网格对齐

回答

相关问题