【CSS Tips】レスポンシブなWebサイトにおける要素の最大幅で横中央揃えのCSSの書き方 - Qiita

これは何 レスポンシブなWebサイトを作る時にありがちな、「画面幅が広い時は、要素の最大幅で横中央揃え」になり、「画面幅が狭い時は、左右に余白を持って画面幅に合わせて横幅が狭くなる」要素のCSSの書き方です。 方法① gridを使った方法 main要素と、mainの中のコンテンツを用意する main要素に、padding-inline: 8px;とdisplay: grid; 、grid-template-columns: minmax(auto, [content-max-width]);を指定する まず、padding-inlineをmain要素に指定しておくことで、画面幅が狭くなった時もコンテンツの左右に余白を残すことができます。 そして、main要素にdisplay: grid; 、grid-template-columns: minmax(auto, [content-max-w