Scribd
Upload
25 views12 pages

Grids & Responsiveness

Uploaded by

rookhum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views12 pages

Grids & Responsiveness

Uploaded by

rookhum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Grids & Responsiveness

Instructor - Love Babbar


Grid-area
The grid-area property speci es a particular area or set of rows and columns that a grid item occupies. It is applied to the grid
item itself with CSS. Here is an example:

• .item { grid-area: 1/2/3/3 }


• Because grid-area is shorthand for the properties: grid-row-start, grid-column-start, grid-row-end and grid-column-
end, the code above places the item from rows 1-3, and columns 2-3.
fi
Grid-template-area:
grid-template-areas is the property used to name the rows and columns of a grid and to set its layout. It could look like this:
Advanced Grid Concepts:

• Fr unit
• Repeat function
• Grid-auto-rows: minmax()
Grid Properties:

• Justify-content
• Align-content
• Justify-items
• Align-items
• Justify-self
• Align-self
• Place-items
• Place-self
Explore time:

• Find out the di erence between grid and inline-grid.


ff
Blog Website Layout
Link multiple pages together [CSS Grid allows you to create simple, elegant and professional quality webpage designs.]
Explore time:
Learn more

• Complex Grid Layouts


• Nesting & Overlapping of Grid Items
Media Queries:

• ‘Viewport’ - the area of the window in which web content can be seen. We use the dimensions of the viewport
(usually the width, but sometimes the height) as the basis of our media queries.

• Media queries are used to set di erent style rules for di erent devices or sized screens. We use breakpoints to set
the condition of a media query. The logic is: @media(feature:value)

• Essentially, media query breakpoints are pixel values that a developer/designer can de ne in CSS. When a
responsive website reaches those pixel values, a transformation (such as the one detailed above) occurs so that the
website o ers an optimal user experience
ff
ff
ff
fi
Multiple BreakPoints:
Explore time:
Create your own layout using Flex and Grids together
Nested Grids
Nesting CSS grids is simple and can be done simply by using the display:grid rule for both a parent and child element.

Here is how that could look with real code:

You might also like