HTML input タグが予期せず CSS グリッドラインを移動する

Question

問題を単純化するために、2x2 CSS グリッド div があるとします。次のコード スニペットに示すように、グリッド テンプレートを使用して、これら 4 つのセル内の 3 つの div (クラス名: "btn"、"title"、および "info") のサイズを変更しました。 (3 番目の div class="info" を維持するために 2 行目の 2 つの列をマージします)

最初の div (class="btn") のアスペクト比は 1/1 です。そこで高さを 10vh に設定すると正方形になります。

＃＃＃私の質問＃＃＃

問題は、最後の div class="info" の "input" タグです。 タグを入力しない場合、すべてが期待どおりに動作します。中央のグリッド線は、最初の列の最小内容 (grid-template-columns で設定されている) を尊重し、左端の位置に留まります。

しかし、最後の div でその input タグを使用すると、グリッドの中心線が予期せず移動してしまいます。グリッドの 2 列目には十分なスペースがあり、移動する必要はないと思うので、これは予想外です。

問題を確認するには、以下のコード スニペットから input タグを削除して、違いを確認してください。

リーリー リーリー

Answer 1

align-self: start を info クラス

に追加するだけです

リーリー リーリー

Answer 2

答えを見つけました、

入力マーク幅の値を設定する必要があります。任意のパーセンテージに設定しましたが、正常に動作します

リーリー