UIkitでuk-gridクラスに入る { margin-left: -30px; } 対処案

Question

問題点

CSSフレームワークUIkitの「class="uk-grid"」を入れた際に以下のcssが付与されます。

.uk-grid {
    margin-left: -30px;
}

これにより親要素の幅を超えてしまう問題を都度対処しているのですが、
もっと効率的でスマートな対処法はありますでしょうか？

良いアイデアを教えてください。

Answer 1

以下のように子要素の padding-left も同じ分だけ取られているので見た目は越えません。

.uk-grid > * {
  padding-left: 30px;
}

ドキュメントを見てもらえればわかりますが .uk-grid の直接の子要素がアイテムになるのではなく、孫要素になります。
padding はアイテム同士の間隔をあけるために取られていますが、単にそうしてしまうと左側だけ空いてしまうのでコンテナの margin で相殺しているものと思われます。

<div class="uk-grid">
  <div class="uk-width-1-2">
    <div class="uk-card uk-card-default uk-card-body">card</div>
  </div>
  <div class="uk-width-1-2">
    <div class="uk-card uk-card-default uk-card-body">card</div>
  </div>
  <div class="uk-width-1-2">
    <div class="uk-card uk-card-default uk-card-body">card</div>
  </div>
</div>

https://getuikit.com/docs/grid

Comments

[pineappleman]

コメントありがとうございます。

そうですよね。
私の質問がわかりにくかったようです。

カスタマイズ時に崩れやすいことが個人的に気持ちが悪く、頭のよいエンジニアの皆さんはどのように対処しているのか意見を募ってみたかったのです。

ですがその感覚が的はずれなのかな、と思いました。
回答内容は間違っていないのでベストアンサーと致します。

[pineappleman]

自分が知りたかった質問が見つかりました。
==
CSS コンテンツからはみ出た子要素のマージンを、親要素のネガティブマージンで相殺するのはやり方としてはありなのか
https://teratail.com/questions/126382
==

「ネガティブマージン」というキーワードを知っていればよかったです。
ご回答誠にありがとうございました。