• Complain

Bodrov Ilya - CSS grid layout 5 practical projects

Here you can read online Bodrov Ilya - CSS grid layout 5 practical projects full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. City: Collingwood VIC Australia, year: 2018;2017, publisher: SitePoint Pty. Ltd., genre: Home and family. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:

Romance novel Science fiction Adventure Detective Science History Home and family Prose Art Politics Computer Non-fiction Religion Business Children Humor

Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.

Bodrov Ilya CSS grid layout 5 practical projects

CSS grid layout 5 practical projects: summary, description and annotation

We offer to read an annotation, description, summary or preface (depends on what the author of the book "CSS grid layout 5 practical projects" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.

Bodrov Ilya: author's other books


Who wrote CSS grid layout 5 practical projects? Find out the surname, the name of the author of the book and a list of all author's works by series.

CSS grid layout 5 practical projects — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "CSS grid layout 5 practical projects" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

Reset

Interval:

Bookmark:

Make
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 - photo 1
Published by SitePoint Pty. Ltd.

48 Cambridge Street Collingwood
VIC Australia 3066
Web: www.sitepoint.com
Email: books@sitepoint.com

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. Youll find a stack of information on JavaScript, PHP, design, and more.

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 Layouts 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 SitePoints HTML & CSS channel, will get you up and running with Grid Layout and using it in your own sites in no time.

Conventions Used

Youll notice that weve 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:

A Perfect Summer's Day

It was a lovely day for a walk.


Tips, Notes, and Warnings
Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are relatedbut not criticalto the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.

Chapter 1: An Introduction to the CSS Grid Layout Module
by Ahmad Ajmi

As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.

In this introductory tutorial, Ill introduce you to this relatively new CSS feature and Ill show you using some examples how the CSS Grid Layout Module works.

What is the CSS Grid Layout Module?

The core idea behind the Grid Layout is to divide a web page into columns and rows, along with the ability to position and size the building block elements based on the rows and columns we have created in terms of size, position, and layer.

The grid also gives us a flexible way to change the position of elements with only CSS without any change to the HTML. This can be used with media queries to alter the layout at different breakpoints.

A Grid Layout Example

Lets start with an example to see the power of Grid Layout, and then Ill explain some new concepts in more detail.

Imagine you want to create a Twitter app with four full height columns layout (Tweets, Replies, Search, and Messages), something abstracted and similar to the screenshot below.

Here is our HTML Tweets Replies Search Messages Then we will apply - photo 2

Here is our HTML:

Tweets
Replies
Search
Messages

Then we will apply some CSS to the .app-layout container element:

.app-layout {.app-layout { display: grid; /* 1 */ grid-template-columns: 1fr 1fr 1fr 1fr; /* 2 */ grid-template-rows: 100vh; /* 3 */}}

View a demo here

Here is the explanation of what weve done in the previous CSS:

  1. Set the display property to grid.
  2. Divide the container element into four columns, each column is 1fr (one fraction) of the free space within the grid container.
  3. Create one row and set the height to be 100vh (full viewport height).

As you can see, the Grid Layout Module adds a new value to the display property which is grid. The grid value is responsible for setting the .app-layout element to be a grid container, which also establishes a new grid formatting context for its contents. This property is required to start using Grid Layout.

The grid-template-columns property specifies the width of each grid column within the Grid, and in our case it divides the .app-layout container to four columns; each one is 1fr (25%) of the available space.

The grid-template-rows specifies the height of each grid row, and in our example we only created one row at 100vh.

A layout with two columns and two rows would look like this:

And we would use the following CSS app-layout display grid - photo 3

And we would use the following CSS:

.app-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vh 50vh;}

View a demo here

We can also achieve the above example only on small screens by wrapping the code inside a media query. This opens up a great opportunity for us to customize the layout differently in different viewports. For example, we can create the previous layout only on viewports under 1024px as follows:

@media screen and (max-width: 1024px) { .app-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vh 50vh; }}

View a demo here

Grid Layout Module Concepts

Now that youve seen a simple example, there are some new concepts that Id like to cover to give you a better understanding of Grid Layout. Although there are a lot of new concepts, I will only take a look at a few of them.

Next page
Light

Font size:

Reset

Interval:

Bookmark:

Make

Similar books «CSS grid layout 5 practical projects»

Look at similar books to CSS grid layout 5 practical projects. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.


Reviews about «CSS grid layout 5 practical projects»

Discussion, reviews of the book CSS grid layout 5 practical projects and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.