グリッドシステムを採用しているcssで見るこれはどんな役割ですか？

Question

.row {
  display: block;
  float: left; 
}
.row:before, .roe:after {
    display: table;
    content: " "; 
}
.row:after {
      clear: both; 
}

なぜ、rowで囲まなきゃいけないのですか？

Answer 1

<div class="row">
  <div class="col-sm-8">
  </div>
  <div class="col-sm-4">
  </div>
</div>

HTML側で、恐らくこんな風に使っているのだと思います。
rowってのは「行」のことです。 辞書
colは、恐らくcolumnの略で「列」のことです。辞書

なぜ、rowで囲まなきゃいけないのですか？

CSSの設計によっては、必ずしも囲まなきゃいけないということはありません。
ただここで例示したHTMLでは列要素に「div」を使います。
HTML5以前にはそういう用途に適したものがdivかdl位なのでこの形が広く使われています。
しかし、「div」はそのままでは横に並びません。
だから、<div class="row"></div>の中では、全てが横に並ぶようにスタイルを設定しています。
「float: left;」で本来縦に並ぶ筈のdivに横に並ぶように指示して
行のdivが閉じた後「.row:after {clear: both; }」でその後のdivは縦に並ぶように戻しています。

Comments

[退会済みユーザー]

ありがとうございます！

Answer 2

やっぱりいいです。どうも。