グリッドでの位置絶対値の使用

これは、実際に使用されている!
クールなことは、グリッドの子絶対位置を持っている場合は、それを配置するグリッドを使用することができます.私の言いたいことをお見せしましょう.

HTML

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="absolute"></div>
</div>

私はクラスのグリッドのdivを持って、それの中に10グリッドがあります.彼らのうちの9人はクラスを持っていません、しかし、最後には絶対的なクラスがあります-これは我々の絶対的に位置する要素です.

CSS設定

コンテンツがなければ、DIVSには幅や高さがないので、明示的にする必要があります.何が起こっているかを見るのが簡単であるように、私もすべての背景色を与えました.

body {
  height: 100vh;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 33vw);
  grid-template-row: repeat(3, 33vh);
  width: 100%;
  height: 100%;
}

.grid > div:nth-of-type(odd) {
  background-color: pink;
}

.grid > div:nth-of-type(even):not(.absolute) {
  background-color: aliceblue;
}

これは私たちに3列と3行の素敵なグリッドを与えるピンクとライトブルーは、画面いっぱいになります.
どのように背景色を追加しているクイックメモ.:nth-of-type 要素のサブセットを選択できるセレクタです.それは奇妙に奇数と偶数のオプションが含まれているので、3 x 3のグリッドでは、2つの色がお互いに隣接していることはありません.
The > 直接の子供を選択するように指示-この場合、すべての子供たちは直接です.
私が加えた偶数のdivへ:not(.absolute) 私が絶対的に配置されたdivが異なる色であることを望むので.このセレクターがより具体的であるので、私がそれに加える何でも上書きします.絶対的なdivので、私は特にそれを除外した.
私は奇妙な、そして、偶数のdivにクラスを与えられることができました、しかし、これはHTMLを書いている間、これはより簡単でした.

絶対配置要素の追加

.absolute {
  position: absolute;
  width: 33vw;
  height: 33vh;
  background-color: yellow;
}

このコードは、他のすべてのDIVSと同じサイズになります.ちょうどそれがきれいに見えるように、そして、それが目立つように黄色です.それは相対的に配置された親に対して位置しています、そして、その親が格子であるので、それは格子の左上に置かれます.
それを中心に動かしたい.私はトップ、左、変換でそれを行うことができます:翻訳、または追加することによってグリッドを使用します.

  grid-column: 2;
  grid-row: 2;

そして、それは現在中心にあります.どのようにクールですか?

ブログ一覧にもどる

私は2020年11月から毎週投稿しています.これは長い時間のように今私はそれを書いて見た!現在、天気は温暖化して、それがCovidについて心配することなく屋外で物事をするのが簡単です、私の日記はいっぱいです.だから私は毎晩行くことになるので、物事は必然的に冬にもっとcovidy取得する前に社会生活を楽しむことができます.