1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない?CSS 「1次元なら Flexbox, 2次元なら CSS Grid」 のように Flexbox と CSS Grid を使い分けると考えている人は多いのではないでしょうか? じつは、1次元であっても、中身の文字列等の幅に関係ない(つまり 幅 が hug contents じゃない) 要素が含まれるときには、 Flexbox で書くよりも CSS Grid のほうが簡潔になる場合があります。 たとえば、「左側は幅固定で、右側はあまった幅を埋める (ともに中身に左右されない)」のように領域を左右に分ける場合です。 (CodeSandbox のプレビュー画面のサイズを変化させると、左側領域の幅は変わらず、右側だけが変わっていることが分かります。) 1. Flexbox で実装する
![1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない? - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0a3af2be6f498befe5a1b4c14392cf614405b1d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9MSVFNiVBQyVBMSVFNSU4NSU4MyVFMyU4MSVBRSVFNSVBMCVCNCVFNSU5MCU4OCVFMyU4MSVBNyVFMyU4MiU4MiUyMGZsZXgtc2hyaW5rJTJDJTIwZmxleC1ncm93JTIwJUUzJTgxJThDJUU1JUJGJTg1JUU4JUE2JTgxJUUzJTgxJUFBJUUzJTgyJTg5JTIwQ1NTJTIwR3JpZCUyMCVFMyU4MSVBNyVFMyU4MiU4MiVFMyU4MSU4NCVFMyU4MSU4NCVFMyU4MiU5MyVFMyU4MSU5OCVFMyU4MiU4MyVFMyU4MSVBQSVFMyU4MSU4NCVFRiVCQyU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjEyYTI5NGZiNjM4YzU1NmE4NjZjNDJkODdkMmQ2NTY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwaG9uZXkzMiUyMGluJTIwJUU2JUEwJUFBJUU1JUJDJThGJUU0JUJDJTlBJUU3JUE0JUJFJUUzJTgyJTg2JUUzJTgyJTgxJUUzJTgxJUJGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04N2RlZjQ3OGMyN2U3NDM4M2E1MjE4Y2Y4YjYwNzY4Yg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcb2a8d9d6069fbbcba6cbc9e63f7a793)