[B! grid] fugashiのブックマーク

https://mizchi-sandbox.github.io/grid-generator/

fugashi 2018/02/17

grid
CSS

リンク

これからのグリッドレイアウト | 第1回 Grid Layout Moduleの概要

これからのグリッドレイアウト第1回 Grid Layout Moduleの概要まずはdisplay:grid;を核とするGrid Layout Moduleがどのような仕様か、その概要を紹介します。さらに、指定の基本となるグリッドコンテナとグリッドアイテムという概念ついて解説をします。はじめに筆者とdisplay:grid;の出会いは、この記事が書かれる4年前の2012年3月頃になります。2011年6月末にIE10PP（Platform Preview）が登場した時に、IE10PPがプリフィックス付きでdisplay:-ms-grid;を実装していました。いろいろとCSSに関する調べ物をしていた際に、「IE10PPではGrid Layout Moduleが使えるらしい。」ということで、display:-ms-grid;を使ったサンプルを作り遊んでいました。グリッド・カラムレイア

fugashi 2017/03/17

grid
css3

リンク

CSS Grid Layout Moduleについて調べたメモ - 1000ch.net

CSS Grid Layout Moduleについて調べたメモ CSSによるレイアウトの問題はFlexboxでほとんどが解決されたと言って良いが、複雑なグリッドレイアウトを実現するためにCSS Grid Layout Moduleの策定が進められている。display: grid;ないしdisplay: inline-grid;といったように、displayプロパティに値が追加されており、それらが指定された要素はブロック要素またはインライン要素のように振る舞い、内包されるコンテンツがグリッドモデルに従ってレイアウトされる。 Chromeは50から、Firefoxは46から対応しているが、Chromeは現安定バージョンの49でもchrome://flags/でExperimental Web Platform featuresを有効にすれば使える。そんなdisplay: grid;について

fugashi 2017/03/17

css3
grid

リンク

ワイヤーフレーム・ブループリント用の方眼紙のような20種類のグリッドを描くPhotoshopのパターン素材

ブループリント用に方眼紙のパターン素材ないかなと探していたら、ちょうどいいのが見つかったのでシェアします。 20 Seamless Photoshop Grid Patterns ダウンロードできる素材のフォーマットは、2つ。 .pat .png .pngは透過なので、そのままシームレスに背景として利用できます。グリッドのパターンは全部で20種類。ホワイトとブラックでグリッドが描かれています。

fugashi 2014/09/27

リンク

960 Grid System

960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,