Designing with CSS Grid Layout.pdf

(1438 KB) Pobierz
Designing with
CSS Grid Layout
i
Designing with CSS Grid Layout
Copyright © 2017 SitePoint Pty. Ltd.
Cover Design:
Natalia Balska
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or
transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information
herein. However, the information contained in this book is sold without warranty, either
express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or
distributors will be held liable for any damages to be caused either directly or indirectly by
the instructions contained in this book, or by the software or hardware products described
herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the
names only in an editorial fashion and to the benefit of the trademark owner with no
intention of infringement of the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood
VIC Australia 3066
Web: www.sitepoint.com
Email: books@sitepoint.com
ii Designing with CSS Grid Layout
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content
for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books,
newsletters, articles, and community forums. You’ll find a stack of information on
JavaScript, PHP, design, and more.
Table of Contents iii
Table of Contents
Preface
............................................................................... iv
Chapter 1
An Introduction to the CSS Grid
Layout Module
................................................................1
Chapter 2
Seven Ways You Can Place
Elements Using CSS Grid Layout
.......................16
Chapter 3
How to Order and Align Items in
Grid Layout
.....................................................................31
Chapter 4
A Step by Step Guide to the Auto-
Placement Algorithm in CSS Grid
.....................40
Chapter 5
How I Built a Pure CSS Crossword
Puzzle
.................................................................................54
iv Designing with CSS Grid Layout
Preface
Layout in CSS has always been a tricky task: hacking solutions using positioning,
floats, and the one-dimensional flexbox has never been very satisfactory.
Fortunately, there is a new tool to add to our arsenal: CSS Grid Layout>. It is an
incredibly powerful layout system that allows us to design pages using a two-
dimensional grid - offering the kind of fine-grained layout control that print
designers take for granted!
Grid Layout’s been in development for a while, but has recently been made a
W3C candidate recommendation and has been added to most of the major
browsers>, so is ready for prime time.
This short selection of tutorials, hand-picked from SitePoint’s HTML & CSS
channel, will get you up and running with Grid Layout and using it in your own
sites in no time.
Conventions Used
You’ll notice that we’ve used certain layout styles throughout this book to signify
different types of information. Look out for the following items.
Code Samples
Code in this book is displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk.</p>
Some lines of code should be entered on one line, but we've had to wrap them
because of page constraints. An
➥
indicates a line break that exists for formatting
purposes only, and should be ignored:

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin