【カスタムCSS】スマホ表示でグリットのアイテム内の文字を横幅いっぱいに表示する方法

Topic summary

主題: スマホ表示でグリッドの各アイテム内テキストを横幅いっぱい(フル幅)に表示したいという相談。

現状設定: カスタムCSSで .grid-item { width: 50%; } とし、.grid__inner { flex-wrap: nowrap; } を指定。横一列に並べる目的で設定している。

症状/要件: グリッドアイテム内の文字がアイテムの横幅を使い切らず、フル幅で表示されない。スマホでの見え方を改善したい。

補足: 見た目の状況把握にスクリーンショット画像が添付されており、レイアウト確認に重要。

用語補足: flex-wrap: nowrap はフレックスアイテムの折り返しを無効化する指定。grid-item の width: 50% は各アイテムを半幅に制限し、2列相当のレイアウトを意図している可能性がある。

進捗/結論: 具体的な解決策やコード例はまだ提示されていない。回答待ちで未解決。

Summarized with AI on December 26. AI used: gpt-5.

横一列に並べるためにカスタムCSSで下記の編集を行いました。

.grid-item {
width: 50%;

.grid__inner {
flex-wrap: nowrap;

画像に写っているグリットのアイテム内の文字を横幅いっぱいに表示させたいです。
ご教示ください。