CSSグリッドプロパティとGriddy.ioの連携方法を学ぶ

あなたがWebデザイン技術についていくなら、あなたはCSSグリッドについて知っているべきです。これらのプロパティは CSS3フォーマットへの新たな追加 そして彼らはすぐに開発者の親友になりつつあります.

最近、CSSグリッドのプロパティを習得するための楽しいゲームを取り上げましたが、ゲームは必ずしも実用的なアイデアを教えるわけではありません。それがGriddyがもっと役に立つかもしれないところです.

この無料のWebアプリはあなたをすることができます リアルタイムでグリッドをカスタマイズしてライブスニペットを更新する ページ上。列、溝、余白を定義し、ページを再構成してグリッドのプロパティがどのように機能するかを学ぶことで、独自のカスタムグリッドを台無しにすることができます。.

Griddyは実際には フロントエンド開発者向けの無料学習ツール CSSグリッドについてもっと知りたい.

このWebアプリケーションを使用すると、グリッドに新しい項目を追加したり、他の項目を削除したり、必要なレイアウトに合わせてサイズを変更したりできます。.

Webアプリケーションには、グリッドプロパティを編集するためのさまざまな入力フィールドを持つさまざまなセクションがあります。これらはあなたがグリッドの行/列を再フォーマットすることを可能にし、それらはあなたに教えます まさにあなたがしていること 途中で.

列の間隔を定義したり、グリッド項目を揃えたり、位置揃え設定で遊んだりすることができます。これらはすべてフォームフィールドを通じて可能です。変更を加えるたびに、プレビューとその下にある小さなコードスニペットが自動的に更新されます。.

この方法で、CSSをさらにコピーしたい場合は、CSSをコピーして自分のスタイルシートに貼り付けることができます。かなりクール!

GriddyはGrid Gardenほど面白くないかもしれませんが、Griddyは学ぶための実用的な方法であり、 視覚的に理解する CSSグリッドプロパティがページ要素に与える影響.

それを試してみるには、Griddyのホームページにアクセスしてください。自分の考えや質問をTwitterの作成者と共有することもできます@drewisthe.