html - グリッド列間のセパレータ

Question

グリッド列の間にセパレータを追加するにはどうすればよいですか。境界線を追加しようとすると、常にレイアウトが壊れていました。わかりやすくするために添付の写真をご覧ください。

ここに画像の説明を入力してください

編集

こちらをご覧ください

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

コード

<div class="container_12">
  <div id="footer">
    <div class="alpha grid_3 dabox"> </div>
    <!-- Box 1-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 2-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 3-->
    <div class="omega grid_3 dabox"> </div>
    <!-- Box 4--> 
  </div>
  <!-- footer--> 
</div>

score 5 · Accepted Answer

グリッドdiv内のコンテンツの周りにラッパーdivを配置します

HTML：

<div class="grid_4">
    <div class="columnDivider">
        contents here
    </div>
</div>

CSS：

.columnDivider {
    border-right: 1px solid #DEDEDE;
    margin-right:-10px; /* size of gutter */
    padding-right:10px; /* size of gutter */
}

score 2 · Accepted Answer

境界線を追加すると1pxが追加されるため、グリッド列に境界線を追加する代わりに、レイアウトを壊します。その中にdivを追加して、境界線を付けてみてください...

score 1 · Accepted Answer

少し違うケースがありましたが、追加したいのはグリッドギャップセンターの場所だけのボーダーです。*私が欲しかったものそしてグリッドグループの1つだけ

親のグリッドクラス

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 50px; /*I Required this have a space between two grid columns*/ 
}

ボーダークラス

.grid-item{
  border-right: 1px solid #000000;
  padding-right: 25px;
}

列ギャップ修飾子

#divtoApply + .grid-container{
  column-gap: 25px;
}

サンプルHTMLコード

<div>
   <div class="grid-container">
      <div>1 --> 1</div>
      <div>1 --> 2</div>
      <div>1 --> 3</div>
   </div>
   <div id="divtoApply" class="grid-container">
      <div class="grid-item">2 --> 1</div>
      <div class="grid-item">2 --> 2</div>
      <div>2 --> 3</div>
   </div>
</div>

score 0 · Accepted Answer

gtamilが言うように、各列に境界線の幅が追加されます。したがって、私が見ているように、yuorオプションは次のとおりです。1）彼の言うとおりに実行する2）1pxの境界線を持つ各列から1pxを削除する3）実際の境界線ではなく背景画像を使用する

通常、仕切りを同じ高さにしたいので、オプション3が通常私の好みです。垂直方向に繰り返されるラッピングコンテナ（列divではない）に背景画像があります。この方法を使用したいが、仕切りの高さが等しくない場合は、代わりに同じ画像を列に追加できます。

html - グリッド列間のセパレータ

4 に答える 4

Related

Reference