3要素のCSSグリッドアラインメント

Question

私は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 | 

そして、私はそれを中心にしたい。まあ、そのような必要性について。

Answer 1

あなたの質問から、要素の幅がわかっているかどうかは不明です。

問題は最大幅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>