CSSでのデザイン

前にそれを試していなかった人々にCSSグリッドを導入する2、3回のラウンドの後、私は人々が質問を尋ねたグリッドの実装ではないとわかりました、むしろ、それはそれの前のビットでした.レイアウトの設定の実際の計画.
あなたが前のポストを読むならば、私が使用した類似物のうちの1つはガーデニングについての1つでした.わかりました.園芸はみんなのことじゃない🤷.
しかし、正直に言うと、私はCSSグリッドでデザインと構築を始めてから、自分のグリッドをもっとスケッチするために鉛筆と紙を使っているのを見つけました.グリッド構文自体は非常に自然の中で視覚的です、そして、私がグリッドを教えているとき、私は常にこの事実をハイライトします.
単純なグリッドの構文を見てください.

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 200px 200px;
}

あなたは既にグリッドが3列と2行を取ることを伝えることができます.そして、これはさらに明白ですgrid-template-areas , 閉じるこの動画はお気に入りから削除されています.

.grid {
  display: grid;
  grid-template-columns: 12em 1fr 15em;
  grid-template-rows: 10em 20em 1fr 10em;
  grid-template-areas: 'a a b'
                       'c d d'
                       'c d d'
                       'e e e';
}

.grid-item__a { grid-area: a; }
.grid-item__b { grid-area: b; }
.grid-item__c { grid-area: c; }
.grid-item__d { grid-area: d; }
.grid-item__e { grid-area: e; }

コードがレイアウトされている方法でブラウザでグリッドを視覚化するのは全く直感的です.そして、それは素晴らしいです、私たちには、このようにふるまうどんな他の特性も全くありません.ビジュアルプレゼンテーションにはビジュアルツールが必要です.
それで、広いストロークで、これは静的な印刷デザインまたは「何でも、その時のインスピレーションの私の源であった」ウェブを作るための私のプロセスです.

オリジナルデザインのすべての要素を調べる

デザインを鉛筆と紙のスケッチに翻訳する

グリッドがどのように構造化される必要があるかを調べる

デザインごとに柔軟で固定されたトラックを指定する

ブラウザーでコードとビューでデザインを構築する

調整し、完全に調理するまでのトラックサイズを微調整、ああ待って、申し訳ありませんが、これは1つの鍋のチーズのレシピではありません😏

私は調整と冗談の部分について冗談ではなかったが.私は普通のWebユーザーよりも頻繁にブラウザの方法を変更すると、通常の考慮します.指数関数的により頻繁に😌.

ユースケース：ティチョアーティストプロフィール

TychoアーティストプロフィールDrew Sullivan
私はDribbbleの上でこのデザインに遭遇して、すぐに私自身に考えました.私はよく知っていたTycho 私が使ったからalbum covers 私のためのインスピレーションとしてCSSConf.Asia 2016年に戻ってください.

調べる

これは、グリッド可能なデザインを見るとき、私の頭で起こることです
デザインは6列と4行に分割することができます.たぶん、あなたは異なるものを見るかもしれません、あなたは直観的に5つのコラムまたは何か他のものを見ることができました、そして、それは全くすばらしいです.私のデザインのテイクは非常にLaissezフェールです.

翻訳、構造、指定

鉛筆と紙は安くて速い.それは私が私の頭の中で私はどのように動作するように、私は最終的な効果を視覚化支援する私のトラックを繰り返すことができます.私が私のグリッド構造に最初に気がつく人々から得る質問は、私がなぜその第4(左から)柔軟なコラムを持っているかです?
私はアナログスケッチが好きです
私は、メインテキストと特徴イメージの間で欲しかった柔軟な間隔のより多くの支配のために、余分のコラムを入れるほうを選びました.しかし、CSSを行うときには、常に1つ以上の方法で猫を肌にすることができます.
最後に、コードタイム!

ビルド

常にマークアップ.子供たちが最近何をしているかに関係なく、私は私の銃で固執して、最初にマークで始めます.楽しい実験(多分あなたのためでなく、確かに私のために)あなたのサイトがどのように読むかを見ることですLynx . サイト上のコンテンツが適切に構造化されているかどうかの良いゲージとして機能しません.
私に見える
基本的なビジュアルスタイリングネクスト、フォント、色、テキストの書式設定のようなもの.ブラウザーは自分のスタイルを持っているので、余白やパドルだけでなく、自分自身のいくつかの最小限のリセットを行うbox-sizing to border-box デフォルトでは.ちょうど個人的な好み.

main {
  max-width: 45em;
  margin: 0 auto;
  position: relative;
  padding: 1em;
}

_:-ms-input-placeholder, :root main {
  display: block;
}

h1 {
  font-family: $header-font;
  color: $accent;
  font-size: calc(3em + 7vw);
  margin-bottom: 0.25em;
}

h2 {
  text-transform: uppercase;
  font-size: calc(1em + 0.5vw);
  color: lighten($text, 50%);
  margin-bottom: 1em;
}

hr {
  opacity: 0;
}

.about {
  line-height: 1.3;
  margin-bottom: 1em;
}

a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: $text;
  margin-bottom: 2em;
  font-weight: bold;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location {
  text-transform: uppercase;
  line-height: 1.5;
  font-weight: bold;
}

button {
  border: 0;
  background-color: $accent;
  color: $main;
  text-transform: uppercase;
  font-size: 100%;
  padding: 1em 2em;
  position: absolute;
  right: 1em;
  bottom: 1em;
}

基本的なレイアウトは、ほぼ普遍的であるCSSを使用するべきです.私はいつもWebページは、すべてのブラウザで正確に同じようにする必要はありませんと言うにもかかわらず、壊れたデザインパターン、私の友人ではありません.このベースのレイアウトは少しプレーンと退屈に見えるかもしれませんが、私はティチョを参照してくださいしたい場合は、すべての情報が私の快適な消費のためにある.
バニラは本当にいい
今、我々はグリッドで遊ぶの楽しいものを行うことができます.私は、スペースが許されるとき、私がレイアウトを完全に窓を占領することを望むので、frとviewport単位のような柔軟な単位で行くのを選びました.それで、あなたが私のGridテンプレートColumnsプロパティを見るならば、あなたが前に格子を使わなかったならば、それは少しのナッツに見えます.
そして、すべての行は、ビュートリポートの高さに相対的です.私は私の初期値が何であったかについて、正確に覚えていることができません.

調整、微調整、リンス、繰り返します

結局、私はこれに決めた.

@supports (display:grid) {
  @media (min-width: 42em) and (min-height: 27em) {
    main {
      max-width: none;
      padding: 0;
      display: grid;
      grid-template-columns: 2fr minmax(10em, max-content) minmax(14em, max-content) minmax(1em, 1fr) fit-content(28em) calc(2em + 0.5vw);
      grid-template-rows: 35vh 40vh 15vh 10vh;
    }

    h1 {
      grid-column: 3 / 6;
      grid-row: 1 / 2;
      z-index: 2;
      padding-left: 0.25em;
      margin-bottom: initial;
    }

    h2 {
      grid-row: 1 / -1;
      grid-column: 6 / 7;
      writing-mode: vertical-rl;
      margin-bottom: initial;
      color: $text;
    }

    hr {
      grid-column: 5 / 6;
      grid-row: 2;
      height: 6px;
      background-color: $text;
      width: 20ch;
    }

    .about {
      grid-column: 5 / 6;
      grid-row: 2;
      align-self: end;
      padding-bottom: 4vh;
      margin-bottom: initial;
    }

    a {
      grid-column: 5 / 6;
      justify-self: end;
      align-self: center;
      margin-bottom: initial;

      &::before {
        content: '';
        display: block;
        height: 4px;
        background-color: $accent;
        width: 4ch;
        margin-bottom: 1em;
      }
    }

    img {
      grid-column: 1 / 4;
      grid-row: 1 / 4;
    }

    .location {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
      z-index: 2;
      background: $main;
      text-align: center;
      display: flex;

      p {
        margin: auto;
      }
    }

    button {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
      position: initial;
      padding: 0;
    }
  }

  @media (min-width: 48em) and (min-height: 27em) {
    hr {
      opacity: 1;
    }
  }
}

Min Heightクエリは、メインヘッダーの下に黒い線の世話をするためにそこに置かれました.レイアウトのビューポート単位を使用することは、間違いなくレイアウトが中断するポイントがあります.そういうわけで、メディア質問は非常に重要です.それで、文脈がもはや意味をなさないとき、あなたはviewport単位から切替えることができます.
アクションの最終結果です
申し訳ありませんが、ブラウザは埋め込まれたビデオをサポートしていませんが、心配しないでくださいdownload it そして、あなたのお気に入りのビデオプレーヤーでそれを見てください!
オリジナルのインスピレーションは、風景のビューで最高の仕事とだけでなく、それは私たちがそれを採用することはできませんを意味しない肖像画の向きでうまく動作しません.私たちの仕事は、ダイナミックな媒体のためのデザインについて考えることです、そして、私は非常にやりがいがあって、楽しい、正直であるとわかります.
我々がちょうど1つの固定寸法で考えないどんな他の媒体が存在しますか?我々は、我々のデザインがどのように最新の特徴でブラウザに現れるかに加えて、狭いスクリーンで、または、古いブラウザーの上でどのようにモーフィングするかについて考えるようになります.そして、私にとって、それは我々の媒体が本当に特別にするものです.

ラッピング

私は、CSSグリッドがデザイナーと開発者により創造的なレイアウトを調査するのを奨励して、その直観的であるが、強力な自然のため、予め缶詰にされたCSSフレームワークに依存しないことを本当に信じています.私はCSSフレームワークが消え去ります、そして、確かにそれらのためにケースを使用すると思います、しかし、私はCSS Gridがウェブ上でレイアウトを構築するための試みへの試みである時を楽しみにします😎.