display gridで最初の要素をコンテンツに応じて自動で幅を変える方法はありますか?

Question

以下のようなHTMLがあり
.item1の文字数が不定だったとして
この文字数によって幅を合わせてcellを生成するようなCSSの書き方はありますか?

<div>
 <span class="item1">text</span>
 <span class="item2">text2text2</span>
 <span class="item3">text3text3text3</span>
</div>

Answer 1

1つ目の要素はコンテンツに応じて可変、2つ目と3つ目の要素が200pxで固定だと以下の数値です。
(200pxというのは、適当な数値なので好きな値を設定してください。)

div {
  display: inline-grid;
  grid-template-columns: 1fr 200px 200px;
}

Comments

[hanamo]

回答ありがとうございます!
出来るだけ絶対値とを使わないようにcssを設定していたのでコンテンツに応じて可変になるように指定できるものを探していました.
勉強になります.

Answer 2

display: inline-grid; を使えばいいでしょう。

div {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

.item1 {
  grid-column: 1 / 3;
}

Comments

[hanamo]

回答ありがとうございます.
grid: inline-blockなるプロパティを知らなかった（見落としていた）ので改めてしっかり勉強しようと思います.