CSS GRIDを勉強してみる(7) - アイテムの配置

フレックスボックスでアイテムの配置を制御して、こんな風に並べてみる。

指定しているCSSはこんな感じだ。

wrapper {
  display: flex;
  align-items: flex-end;
  min-height: 200px;
}

.wrapper > div{
  padding: 1em;
}

.box1 {
  align-self: stretch;
}

.box2 {
  align-self: flex-start;
}

これは本質に関係ないが、見づらいのでpaddingで箱を大きくした。

align-items: flex-end: を指定しているのでbox3以降はボックスの下に位置している。 box1, box2はそれを上書きすることにより位置を変えている。

ちなみに、wrapperのalign-itemsの指定を外すと

となる。どうしてデフォルトがこうなってるのかは、よくわからない。

さて、一方、グリッドの場合だが、align-itemsおよびalign-selfは同じように機能する。

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  grid-auto-rows: 200px;
}

.box1 {
  align-self: stretch;
}

.box2 {
  align-self: start;
}