スクラントンタイムズでCSS格子で引用されるマイケルスコット

彼らのレイアウトがはっきりとコラムと行に分けられるので、新聞はCSS格子でレイアウトをつくることを練習するすばらしい方法です.以下は、Etsyユーザーによって作成されるオフィスからのスクラントンタイムズ新聞のレクリエーションですdatemike1 . タイトルと引用は、シーズン3のエピソード20から、“製品リコール”、マイケルは記者団、チャドライト、スクラントンタイムズから記者会見を開催しています.エピソードの前に、マイケルは狂った長い記事見出しを投げます.
これは、もともと公開されたcodinhood.com

コンベンション

バナーは、そのユニークな形のためにより複雑なオブジェクトの1つです.本質的に3つの主要な部分があります:中心の長方形、左右の長方形、およびそれらの間の接続部分.

接続部分は、3として強調表示され、影の幻想を与えるために赤の暗い色合いで右三角形です.

スクラントンタイムズタイトル

新聞のタイトルはUnifrakturCook フォントは、非常によく、元のフォントと一致しません.私が言うことができた限りでは、オリジナルのフォントを使用しているので、私はGoogleのフォント上で最高のフォントを行った良いように無料の代替手段を見つけることができませんでした.

主要な記事タイトル

タイトルのフォントはImpact , これは長いタイトルがそんなに多くのスタンドアウトになります.行ごとに行を取得する課題は、それぞれの行が異なっているのでfont-size . 私はCSSのグリッドを使用して1行あたりの単語の必要な数を維持するためにfont-size まで、それぞれの方法を並ぶ.

メイングリッド

レイアウトは、等しい幅のcolumn-gap of 20px . イメージと引用は、中央の3つのコラムにわたります.これがCSSグリッドで実現できるいくつかの方法がありますが、メイングリッドが3列のネストされたグリッドと一緒に行きました.左右の列は同じ幅で、中央の列はギャップを含む3つの列にまたがっています.

.newspaper__grid {
  display: grid;
  grid-template-columns: 208px 1fr 208px;
  grid-gap: 20px;
}

メイングリッド内の中央の列は、3列のグリッドです.これらのサブコラムの各々は、同じ幅を有する.

.newspaper__threecolumn {
  display: grid;
  grid-template-columns: repeat(3, 208px);
  grid-gap: 20px;
}

ボトムグリッド

一番下のグリッドは、異なる幅で8列で構成されています.The 1px 列は除算線です.これは確かにこの効果を達成する唯一の方法ではありませんが、グリッドレイアウトがどのように柔軟になるかを示します.

.newspaper__bottom {
  display: grid;
  grid-template-columns: 270px 100px 1px 240px 1px 240px 1px 208px;
  grid-gap: 10px;
}

結論

CSS Gridは、CSSのいくつかの行で複雑なレイアウトを作成することができます.多くの場合、以前のCSSメソッドよりも劇的に簡単です.