This document summarizes CSS Grid Layout, a new two-dimensional grid system being added to CSS. It discusses some of the limitations of existing CSS layout methods and how Grid Layout addresses them. Key points include: Grid Layout uses line-based placement to position items, grid tracks can be flexible or fixed widths, areas can be explicitly or implicitly named, and the system avoids hacks and limitations of previous methods.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
Bi-Weekly Tech Talk for Woodridge Software Employees. Scott Holdeman explores the history, viability and implementation of the CSS3 flexbox (flexible box layout) layout in modern web browsers.
This 20-minute presentation provides an introduction to several HTML5 semantic tags: article, section, aside, header, footer, nav. Includes how you can address browser compatibility issues.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
Bi-Weekly Tech Talk for Woodridge Software Employees. Scott Holdeman explores the history, viability and implementation of the CSS3 flexbox (flexible box layout) layout in modern web browsers.
This 20-minute presentation provides an introduction to several HTML5 semantic tags: article, section, aside, header, footer, nav. Includes how you can address browser compatibility issues.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
Rachel Andrew
Co-founder of Perch CMS
Find more by Rachel Andrew: http://www.slideshare.net/rachelandrew
All Things Open
October 26-27, 2016
Raleigh, North Carolina
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
Grid Layout is here! What is it? Why is it different to flexbox? How do I get started? What about old browsers? All these questions and more in a high speed tour of the spec.
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
UNLOCKING THE POWER OF CSS GRID LAYOUT
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
Grid layout has now landed in all of the mainstream desktop browsers. It's exciting but how do we start to move to using grid layout, and why should we?
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
I explain some of the common layout problems that CSS Grid and related specifications attempt to solve - while answering some of the common questions I am asked about Grid Layout.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
3. The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken
out of document flow and risk overlaps
• Redundant markup and positioning oddities with
display: table
• White space issues with inline-block
5. Seeing Flexbox as the silver bullet for
layout issues is likely to lead us down
another path of layout hacks.
6. The cost of taming layout methods
• Developer hours spent learning non-obvious
concepts.
• Compromises in terms of document semantics in
order to achieve responsive layouts.
• Needing to lean on frameworks to help with
complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
7. We need a designed for purpose
layout system for the sites and
applications we develop today.
9. Our HTML consists of a
div with a class of
wrapper and six child
elements.
<div class="wrapper">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
10. To create a grid we use a
new value of the display
property.
display: grid
.wrapper {
display: grid;
}
11. We describe the grid using
the new properties:
grid-template-columns
grid-template-rows
.wrapper {
display: grid;
grid-template-columns:
100px 10px 100px 10px 100px;
grid-template-rows:
auto 10px auto;
}
12. We position items using the
new properties:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
.a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
13. To position an item bottom
centre, I start at column
line 3, this is the line after
the gutter track.
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
14. To span more tracks we
just change the end row or
column line.
.b {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
15. The longhand for line-
based placement means
up to 4 properties to
position each element. .a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
16. Declare start and end
values with grid-column
and grid-row.
Values are separated by a
/ symbol.
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 6;
grid-row: 3 / 4;
}
20. Grid Lines
Lines can be horizontal or vertical. They
are referred to by number and can be
named.
Highlighted is Column Line 2.
21. Grid Track
A Grid Track is the space between two
Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between
Row Lines 2 and 3.
22. Grid Cell
The smallest unit on our grid, a Grid Cell
is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row
lines 2 and 3 and column lines 2 and 3.
23. Grid Area
Any area of the Grid bound by 4 Grid
Lines. It can contain many Grid Cells.
The highlighted Grid Area is between
row lines 1 and 3, column lines 2 and 4.
24. All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
27. The HTML around my
page content.
The various areas of my
page are child elements
of a div with a class of
wrapper.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>
28.
29. Declaring a grid on
wrapper.
The grid has three
columns, and four rows.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto;
}
30.
31. Positioning our elements
using the grid-column and
grid-row shorthand.
This is all we need to do
to create our layout.
.mainheader {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.panel {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.content {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
32.
33.
34. I can add a footer to this
layout.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>
37. Our grid only has 5 row
lines specified - yet we
placed an item between
row lines 5 and 6.
Grid creates an implicit
grid line for us.
.wrapper {
display: grid;
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto;
}
.mainfooter {
grid-column: 1 / 4;
grid-row: 5 / 6;
}
38. Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-
template-rows or grid-template-columns.
• Implicit lines are created when you place
something into a row or column track outside of
the explicit grid.
• Default behaviour is those tracks are auto sized.
You can specify a size with the grid-auto-
columns and grid-auto-rows properties.
39. Grid is “table like” however …
• Unlike a table for layout Grid does not rely on
your content being a particular order in the
source.
• Being entirely described in CSS we can move
things around the Grid at different breakpoints,
introduce or redefine a Grid for any breakpoint.
40. Power and Responsibility
• As with Flexbox you can use your ability to
change how things are ordered for good or evil.
• Good = creating the most accessible source
order and using Grid to get the optimal display
for each device.
• Bad = using Grid as an excuse to forget about
the source.
• Terrible - stripping out semantic elements to
make everything a child of the grid.
41. Using Grid to order the
page elements in a single
column for narrow screen
widths.
.wrapper {
display: grid;
grid-template-rows:
10px auto 10px auto 10px auto 10px auto;
}
.mainheader {
grid-row: 2 / 3;
}
.content {
grid-row: 4 / 5;
}
.panel {
grid-row: 6 / 7;
}
.mainfooter {
grid-row: 8 / 9;
}
42.
43. Redefine the Grid at min-
width 550 pixels.
Position items as in the
earlier example.
@media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto 20px auto;
}
.mainheader {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.panel {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.content {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
.mainfooter {
grid-column: 1 / 4;
grid-row: 6 / 7;
}
}
46. Name lines with the name
in parenthesis.
Remember we name grid
lines and not grid tracks.
.wrapper {
display: grid;
grid-template-rows:
10px [row-header-start] auto [row-header-end]
10px [row-content-start] auto [row-content-end]
10px [row-panel-start] auto [row-panel-end]
10px [row-footer-start] auto [row-footer-end];
}
47. Here we are positioning
based on line numbers.
.mainheader {
grid-row: 2 / 3;
}
.content {
grid-row: 4 / 5;
}
.panel {
grid-row: 6 / 7;
}
.mainfooter {
grid-row: 8 / 9;
}
48. Here we are positioning
by named lines.
.mainheader {
grid-row: row-header-start / row-header-end ;
}
.content {
grid-row: row-content-start / row-content-end;
}
.panel {
grid-row: row-panel-start / row-panel-end ;
}
.mainfooter {
grid-row: row-footer-start / row-footer-end;
}
49. 15th May Editor’s
Draft
Spec changed to use square brackets
instead of parenthesis for named grid
lines. Shipped by Igalia for Blink on June
5th - I’ll update my examples online
once in Chrome.
52. We assign a name to the
elements on our page.
I am doing this outside of
any Media Queries.
.mainheader {
grid-area: header;
}
.content {
grid-area: content;
}
.panel {
grid-area: sidebar;
}
.mainfooter {
grid-area: footer;
}
53. Describe the layout on
the parent element using
the grid-template-areas
property.
A period “.” indicates that
this grid cell is empty.
.wrapper {
display: grid;
grid-template-rows:
10px auto 10px auto 10px auto 10px auto;
grid-template-areas:
"."
"header"
"."
"content"
"."
"sidebar"
"."
"footer";
}
54.
55.
56. Redefining the template
areas for the wider
layout. @media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows:
2em auto 1em auto 1em auto;
grid-template-areas:
". . ."
"header header header"
". . ."
"sidebar . content"
". . ."
"footer footer footer"
}
}
57.
58.
59. Another syntax change!
The May 15th Editor’s
Draft allows for multiple
full stop characters to be
used to indicate an empty
cell.
This means you can line
up your ascii art more
neatly.
@media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows:
2em auto 1em auto 1em auto;
grid-template-areas:
"....... ...... ......."
"header header header "
"....... ...... ......."
"sidebar ...... content"
"....... ...... ......."
"footer footer footer "
}
}
61. Named grid areas create
four implicit named lines.
You can use these in the
same way as lines you
have explicitly named.
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows: 2em auto 1em auto 1em
auto;
grid-template-areas: ". . ."
"header header header"
". . ."
"sidebar . content"
". . ."
"footer footer footer"
}
.test {
z-index: 100;
background-color: red;
grid-column: content-start / content-end;
grid-row: content-start / footer-end;
}
62.
63. Items on the Grid can be layered
using the z-index property.
65. The Bootstrap grid, and
those in other
frameworks relies on our
describing the layout in
the markup.
<!-- Stack the columns on mobile by making one full-width and
the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3%
wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
66. With CSS Grid Layout we describe the
layout in the CSS and can redefine
that description at any breakpoint.
68. You can use the repeat
keyword to repeat all or
part of the grid definition.
This would create 4 200
pixel wide tracks,
separated by a 20 pixel
wide gutter track.
grid-template-columns: repeat(4, 200px 20px);
69. The fr unit is a flexible
length that represents a
fraction of the available
space in the grid
container.
grid-template-columns: 5fr 1fr 10fr 1fr 5fr;
70. We can give multiple grid
lines the same name.
This means we can use
the span keyword to span
n number of lines, rather
than specifying a specific
grid line.
.wrapper {
grid-template-columns:
repeat(4, [col] 200px [gutter] 20px);
}
.content {
grid-column: col 2 / span gutter 2;
}
71. The markup used to
create the Grid using the
Skeleton framework.
Like the Bootstrap Grid
and other similar
frameworks it requires
classes that describe the
grid to be added to the
markup.
<div class="container">
<h1>Skeleton Grid</h1>
<div class="example-grid">
<div class="row">
<div class="four columns">Four columns</div>
<div class="four columns">Four columns</div>
<div class="four columns">Four columns</div>
</div>
<div class="row">
<div class="eight columns">Eight columns</div>
<div class="four columns">Four columns</div>
</div>
<div class="row">
<div class="three columns">Three columns</div>
<div class="three columns">Three columns</div>
<div class="three columns">Three columns</div>
<div class="three columns">Three columns</div>
</div>
<div class="row">
<div class="six columns">Six columns</div>
<div class="six columns">Six columns</div>
</div>
</div>
72.
73. When using CSS Grid
Layout we have no need
to describe our grid in
markup.
<div class="wrapper skeleton">
<h1 class="header">CSS Grid Layout Version</h1>
<div class="box1">Four columns</div>
<div class="box2">Four columns</div>
<div class="box3">Four columns</div>
<div class="box4">Eight columns</div>
<div class="box5">Four columns</div>
<div class="box6">Three columns</div>
<div class="box7">Three columns</div>
<div class="box8">Three columns</div>
<div class="box9">Three columns</div>
<div class="box10">Six columns</div>
<div class="box11">Six columns</div>
</div>
74. Defining the 12 column
grid.
The repeat keyword
repeats the pattern of
columns or rows the
number of times specified
before the comma.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-rows:
auto repeat(4, [row] auto [gutter] 15px);
}
75. Placing box1 on the grid.
Multiple lines have the
same name. This means we
can use the span keyword.
Here I place box1 starting
at the first line named col,
spanning to the 4th line
named gutter.
In the first row named row,
spanning to the first line
named gutter.
.box1 {
grid-column: col / span gutter 4;
grid-row: row / span gutter;
}
76. Placing box8 on the grid.
Starting on column line 7,
spanning 3 gutter lines.
In the 3rd row named row,
spanning 1 gutter line.
.box8 {
grid-column: col 7 / span gutter 3;
grid-row: row 3 / span gutter;
}
77.
78. With Grid Layout we can
easily span rows just like
columns.
.box1b {
grid-column: col / span gutter 4;
grid-row: row / span gutter 2;
}
.box2b {
grid-column: col 5 / span gutter 4;
grid-row: row / span gutter 3;
}
79.
80. The header and footer
span the full grid.
The content and panel
display side by side.
.mainheader {
grid-column: col / span gutter 12;
grid-row: row /span gutter;
}
.mainfooter {
grid-column: col / span gutter 12;
grid-row: row 3 /span gutter;
}
.content {
grid-column: col 5 / span gutter 8;
grid-row: row 2 / span gutter;
}
.panel {
grid-column: col / span gutter 4;
grid-row: row 2 / span gutter;
}
88. My markup is an
unordered list with a
class of wrapper.
The first list item
contains text. The rest an
image.
Two list items have a
class of ‘wide’.
<ul class="wrapper">
<li class="text"><p>…</p></li>
<li><img src="../images/balloon1.jpg" alt="hot air balloon" />
<p>Balloons 1</p></li>
<li><img src="../images/balloon2.jpg" alt="hot air balloon" />
<p>Balloons 2</p></li>
<li><img src="../images/balloon3.jpg" alt="hot air balloon" />
<p>Balloons 3</p></li>
<li class="wide"><img src="../images/balloon4.jpg" alt="hot air
balloon" />
<p>Balloons 4</p></li>
<li><img src="../images/balloon5.jpg" alt="hot air balloon" />
<p>Balloons 5</p></li>
<li><img src="../images/balloon6.jpg" alt="hot air balloon" />
<p>Balloons 6</p></li>
<li class="wide"><img src="../images/balloon7.jpg" alt="hot air
balloon" />
<p>Balloons 7</p></li>
<li><img src="../images/balloon8.jpg" alt="hot air balloon" />
<p>Balloons 8</p></li>
</ul>
89.
90. Narrow screen layout,
before any media queries.
A single column, single
row grid.
Grid layout will create
implicit rows for any
additional list items.
.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}
91.
92. At a 460 pixel breakpoint
we redefine the grid to
have two equal columns.
With grid-auto-flow set
to dense gaps are not left
in the grid if they can be
filled.
@media (min-width: 460px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.text {
grid-column: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
}
93.
94. We move to 4 equal
columns at 660 pixels.
I position the li with a
class of text between
column lines 2 and 4, and
row lines 1 and 3.
@media (min-width: 660px) {
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.text {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
}
102. Defining the 12 column
grid.
We define Grid Tracks
that will be used as
columns, preceded by a
line named ‘col’ and those
used as gutters, preceded
by a line named ‘gutter’.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-rows:
auto repeat(4, [row] auto [gutter] 15px);
}
103.
104. A proposal for column-gap and row-gap
has been shifted to Level 2 of the CSS
Grid Specification.
105. With dynamic content we
may not know how many
rows we will need in a
Grid. Grid will create
implicit row lines for
extra content - but won’t
add a gutter track for us.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-rows:
auto repeat(4, [row] auto [gutter] 15px);
}
106. Level 1 includes the ability
to repeat a pattern auto
number of times.
This is currently not
implemented.
.wrapper {
display: grid;
grid-template-columns:
repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
grid-template-rows:
auto repeat(auto, [row] auto [gutter] 15px);
}
108. In this markup the boxes
e, f and g are children of
the element with a class
of d.
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
</div>
</div>
109. I have declared a grid on
the wrapper div, and
positioned the immediate
children - the elements
with classes a to d.
.wrapper {
display: grid;
grid-template-columns:
repeat(4, [col] 150px [gutter] 10px);
grid-template-rows:
repeat(2, [row] auto [gutter] 10px );
}
.a {
grid-column: col / span gutter 2;
grid-row: row;
}
.b {
grid-column: col 3 / span gutter 2;
grid-row: row;
}
.c {
grid-column: col / span gutter 2;
grid-row: row 2;
}
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
}
110.
111. To make box d a grid itself
I declare a grid as normal
then position the children
of this element.
They take their grid lines
from the grid declared on
box d.
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-template-columns: 1fr 10px 1fr;
grid-template-rows: auto 10px auto;
}
.e {
grid-column: 1 / 4;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 3;
}
.g {
grid-column: 3;
grid-row: 3;
}
114. In our existing layout we
are creating a completely
new grid on box d.
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-template-columns: 1fr 10px 1fr;
grid-template-rows: auto 10px auto;
}
115. If we declare that this
grid is a subgrid, we can
then position the children
of this element on the
same grid their parent is
placed on. .d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
119. Grid needs your feedback!
Enable Experimental Web Platform Features in Chrome.
Play with my examples and think up ways you would use Grid.
Follow the CSS Grid conversation on www-style by searching for
[css-grid].
See the current issues in the Editor’s Draft http://dev.w3.org/
csswg/css-grid/#issues-index
120. Browser Support
All my examples work in Chrome unprefixed - you need to enable
the Experimental Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by
Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Mozilla are currently implementing Grid in Firefox.
There is a Polyfill under active development: https://github.com/
FremyCompany/css-grid-polyfill/
121. All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.