CSS Grid Layout allows for two-dimensional page layouts using rows and columns to position elements. It offers several methods for defining the grid including explicit definition with grid-template-columns/rows, implicit definition by letting grid create tracks automatically, and using fractional units and repeat functions for flexible layouts. Elements can then be placed on the grid using line-based positioning with grid-column/row or named grid areas. Media queries allow the grid definition and element placement to adapt at different breakpoints.
Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
Flexbox is a new feature in CSS that drastically changes the way we think about layout. In short, it's magic, and it makes building responsive sites a breeze. Adam will demo flexbox and teach you how a few lines of CSS can get you started building responsive sites with this great new feature!
Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
Flexbox is a new feature in CSS that drastically changes the way we think about layout. In short, it's magic, and it makes building responsive sites a breeze. Adam will demo flexbox and teach you how a few lines of CSS can get you started building responsive sites with this great new feature!
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
Ada beberapa cara untuk menampatkan sintaks CSS di halaman web kita. Ada dengan menggunakan cara embed, inline dan external.
slide bantuan untuk video youtube:
https://youtu.be/bnnislprJro
di channel Web Programming UNPAS
Masih ingat anatomi dari sebuah sintaks CSS kan? di dalamnya terdapat bagian yang dinamakan selector.
Selector digunakan untuk memilih elemen spesifik pada HTML yang akan diberi style. Ada 3 jenis selector yaitu elemen HTML, id dan class.
slide bantuan untuk video youtube:
https://youtu.be/0KLwWyQyMQo
(** MYSQL DBA Certification Training https://www.edureka.co/mysql-dba **)
This Edureka PPT on SQL Joins will discuss the various types of Joins used in SQL Server with examples. The following topics will be covered in this PPT:
Introduction to SQL
What are Joins?
Types of Joins
FAQs about Joins
Follow us to never miss an update in the future.
YouTube: https://www.youtube.com/user/edurekaIN
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width , border-style , border-color .
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
Ada beberapa cara untuk menampatkan sintaks CSS di halaman web kita. Ada dengan menggunakan cara embed, inline dan external.
slide bantuan untuk video youtube:
https://youtu.be/bnnislprJro
di channel Web Programming UNPAS
Masih ingat anatomi dari sebuah sintaks CSS kan? di dalamnya terdapat bagian yang dinamakan selector.
Selector digunakan untuk memilih elemen spesifik pada HTML yang akan diberi style. Ada 3 jenis selector yaitu elemen HTML, id dan class.
slide bantuan untuk video youtube:
https://youtu.be/0KLwWyQyMQo
(** MYSQL DBA Certification Training https://www.edureka.co/mysql-dba **)
This Edureka PPT on SQL Joins will discuss the various types of Joins used in SQL Server with examples. The following topics will be covered in this PPT:
Introduction to SQL
What are Joins?
Types of Joins
FAQs about Joins
Follow us to never miss an update in the future.
YouTube: https://www.youtube.com/user/edurekaIN
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width , border-style , border-color .
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
For far too long we've been forced to reuse layout patterns that have worked in the past, creating a web full of sites that all look the same. Narrow timelines, browser support restrictions and lack of a true grid system have led us to create work that is "good enough".
I've spent years exploring how we can make the web a more unique space. With some of the newer CSS techniques available, we can start to make more creative designs. CSS Grid Layout is on the horizon and will play a major role in the design of our sites. Finally having a true, 2 dimensional grid will give our layouts much more flexibility and it is on us to explore the possibilities.
This talk was presented at CSS Day 2016.
Slides about ITCSS – an Inverted Triangle CSS architecture which will allow you to write maintainable and scalable stylesheets without pain.
EDIT:
I teamed with Artur Kot (https://twitter.com/arturkot) to update and enrich the presentation. Enjoy!
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)Igalia
By Manuel Rego.
Slides at http://people.igalia.com/mrego/talks/html5devconf-2015-css-grid-layout/#/
Layout on the web has been missing a proper solution for creating grid designs since the beginning. But this dark period is coming to an end with the new CSS Grid Layout spec. Grid layout is being implemented in every major web engine. The good news is that it will be hitting your browsers very soon.
During this talk we will not only review its syntax and main features, but also explain the internal details about what the browser has to do to render a CSS grid. After the talk, you'll be able to start playing with CSS Grid Layout, understanding the underlying steps involved, and provide feedback to the spec editors and browser implementors.
Steve Hong of CrossComm demonstrates the use of grid design with CSS grid frameworks such as Blueprint CSS and 960gs. Using CSS frameworks can speed up development and make future updating smoother by providing pre-packaged solutions to common problems and processes. Grid frameworks, in particular, can serve as solid systems for website design and layout using standardized column sizes. It's possible to create a tight CSS grid layout without using HTML tables. This presentation is a walkthrough of the design and development process starting with grid-based mockups using tools like MockFlow and Photoshop and then moving on to applying grid frameworks using tools like Boks and other grid generators.
CSS Layout in 2016 is a mess of hacked together methods using techniques that were never designed for complex web and application layout. However change is in the air, brought to us by specifications such as CSS Grid Layout, Flexbox, and the Box Alignment Module. In this session Rachel will introduce these specifications, explaining how they fit together to create a new system for layout.
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
CSS Grid Layout - An Event Apart OrlandoRachel Andrew
My slides from An Event Apart Orlando. Also take a look at the code examples and resources at https://rachelandrew.co.uk/speaking/event/an-event-apart-orlando-special-edition-2016
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.
Solving Layout Problems With CSS Grid and FriendsFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Rachel Andrew, Perch CMS
Overview
CSS Grid Layout launched into the majority of our browsers in 2017. As designers and developers have started to use Grid Rachel has been answering a lot of questions about the specifications. In this talk she’ll answer some of the common questions about Grid Layout in production – from dealing with old browsers to what might come next in CSS for layout. There will be plenty of practical tips for you to use in your projects today.
Objective
To give attendees practical ways in which they can use new CSS to solve tricky problems
Target Audience
Front-end developers
Assumed Audience Knowledge
Some CSS knowledge
Five Things Audience Members Will Learn
CSS Grid
Flexbox
Box alignment
Feature queries
CSS tips and tricks
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.
Today we have CSS specifications for animation and transitions, complex layout, custom properties and much more. In addition to the breadth of modern CSS specifications, our evergreen, auto-updating browsers sneak in new features with every release.
In this talk, I’ll be taking a look at some of the things that CSS is capable of, some of which you might think you need a JavaScript framework or at least a pre-processor to achieve.
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!
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
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
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
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
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
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
2. Rachel Andrew
CSS Working Group Invited Expert
Google Developer Expert for Web Technologies
Co-founder Perch CMS: https://grabaperch.com
Contact: me@rachelandrew.co.uk
rachelandrew.co.uk
@rachelandrew
7. Defining a Grid
- display: grid;
- display: inline-grid;
With a grid defined on the
parent element, all direct
children become Grid
Items.
.cards {
display: grid;
}
8. Defining a Grid
- grid-template-columns
- grid-template-rows
With these properties we
define an explicit grid. This
one has 3 column tracks
and 3 row tracks.
http://cssgrid.me/05161
.cards {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 200px 200px 200px;
}
9. Defining a Grid
- grid-column-gap
- grid-row-gap
- grid-gap
We can create a gap
between rows and
columns. This gap acts
much like column-gap in
multiple column layout.
http://cssgrid.me/05162
.cards {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
10. Defining a Grid
The fr unit is a fraction
unit, representing a
fraction of the available
space in the container.
I have created 3 equal
width columns, each 1
fraction of the available
space.
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
11. Defining a Grid
The fr unit is a fraction
unit, representing a
fraction of the available
space in the container.
We have created 3
columns, the units add up
to 4. The space is spilt into
4 equal parts, the first 2
tracks are given 1 part, the
fine track 2 parts.
.cards {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
12. Defining a Grid
The fr unit is a fraction
unit, representing a
fraction of the available
space in the container.
You can mix fraction units
with other length units.
Any tracks with a fraction
unit share the space left
after fixed size tracks and
the gaps have been
defined.
http://cssgrid.me/05164
.cards {
display: grid;
grid-template-columns: 500px 1fr 2fr;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
13. Defining a Grid
The repeat syntax lets us
define a repeating pattern
of tracks.
Here we are creating 3 1fr
column tracks.
http://cssgrid.me/05165
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
14. Defining a Grid
The explicit grid is the one
we define with rows and
columns. If we didn’t define
rows however grid would
great implicit row tracks
for us.
These will be auto sized by
default.
http://cssgrid.me/05166
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
15. Defining a Grid
We can define the size of
implicit rows and column
with the properties:
- grid-auto-rows
- grid-auto-columns
http://cssgrid.me/05167
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
grid-gap: 20px;
}
16. Defining a Grid
Use the auto-fill keyword
and grid will create as
many tracks that will fit
into the container.
http://cssgrid.me/05168
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 20px;
}
17. Defining a Grid
The minmax() function
enables the creation of
flexible grids. The first
value is the minimum size
of the Grid Track, the
second the max size - set
that to 1fr to allow the
track to take up remaining
space.
http://cssgrid.me/05169
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-gap: 20px;
}
19. 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.
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 lines relate to writing mode. In
a right to left language such as
Arabic the first column line is the
right-hand line.
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. Using line numbers
I have created a grid with 3
column tracks and 2 row
tracks.
With no placement our
blocks lay out one per grid
cell.
.cards {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 200px;
}
1 2 3
25. Using line numbers
To place an item on the grid
I specify start and end lines
using new properties:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
.card:nth-child(1) {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
1
2
3
26. Using line numbers
These can be expressed as
a shorthand:
- grid-column
- grid-row
http://cssgrid.me/051614
.card:nth-child(1) {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
1
2
3
27. Using line numbers
They can be expressed as
one line using grid-area,
the order of the values is:
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
.card:nth-child(1) {
grid-area: 1 / 2 / 3 / 4;
}
1
2
3
28. Using line names
We name lines when
creating the grid. The name
goes in square brackets.
.cards {
display: grid;
grid-gap: 20px;
grid-template-columns: [side-start] 1fr
[main-start] 1fr 1fr
[main-end];
grid-template-rows: [main-start] 200px 200px
[main-end];
}
29. Using line names
Use the name instead of
the line number as the
value of the placement
properties.
http://cssgrid.me/051616
.card:nth-child(1) {
grid-column: main-start / main-end;
grid-row: main-start / main-end;
}
30. Lines define Grid Areas
By creating lines named
main-start and end for
rows and columns, grid has
created me a named grid
area called ‘main’.
I can use that to position
my element rather than the
line numbers or names.
http://cssgrid.me/051617
.cards {
display: grid;
grid-gap: 20px;
grid-template-columns: [side-start] 1fr
[main-start] 1fr 1fr
[main-end];
grid-template-rows: [main-start] 200px 200px
[main-end];
}
.card:nth-child(1) {
grid-area: main;
}
31. Defining Grid Areas
This time I haven’t named
my lines, I’ve just given
each element a name.
.card:nth-child(1) {
grid-area: main;
}
.card:nth-child(2) {
grid-area: side1;
}
.card:nth-child(3) {
grid-area: side2;
}
32. grid-template-areas
I then use these names to
describe my layout as the
value of grid-template-
areas.
http://cssgrid.me/051618
.cards {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px;
grid-template-areas: "side1 main main"
"side2 main main";
}
mainside1
side2
main
main main
36. 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>
37.
38. Declaring a grid on
wrapper.
The grid has two columns
making 3 column lines.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
39.
40. Positioning our elements
using the grid-column and
grid-row shorthand.
We can omit the -end
value if only spanning 1
track.
This is all we need to do
to create our layout.
.mainheader {
grid-column: 1 / 3;
grid-row: 1 ;
}
.panel {
grid-column: 1 ;
grid-row: 2 ;
}
.content {
grid-column: 2 ;
grid-row: 2 ;
}
43. 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>
47. Typically rows in our
layouts are sized to fit
their contents, meaning
that you can avoid
specifying rows and grid
will create them as items
are positioned into them. .wrapper {
display: grid;
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
48. 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.
49. Using Grid to order the
page elements in a single
column for narrow screen
widths.
.wrapper {
display: grid;
grid-row-gap: 10px;
}
.mainheader {
grid-row: 1 ;
}
.content {
grid-row: 2 ;
}
.panel {
grid-row: 3 ;
}
.mainfooter {
grid-row: 4 ;
}
54. Name lines with the name
in square brackets.
Remember we are naming
grid lines and not grid
tracks. .wrapper {
display: grid;
grid-row-gap: 10px;
grid-template-rows:
[row-header-start] auto
[row-content-start] auto
[row-panel-start] auto
[row-footer-start] auto [row-footer-end];
}
55. Here we are positioning
based on line numbers.
.mainheader {
grid-row: 1 ;
}
.content {
grid-row: 2 ;
}
.panel {
grid-row: 3 ;
}
.mainfooter {
grid-row: 4 ;
}
56. Here we are positioning
by named lines.
.mainheader {
grid-row: row-header-start;
}
.content {
grid-row: row-content-start;
}
.panel {
grid-row: row-panel-start;
}
.mainfooter {
grid-row: row-footer-start;
}
59. 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;
}
60. Describe the layout on
the parent element using
the grid-template-areas
property.
.wrapper {
display: grid;
grid-row-gap: 10px;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
61.
62.
63. Redefining the template
areas for the wider
layout.
@media (min-width: 550px) {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
}
}
64.
65.
66. Repeating the name of an
area causes the area to
span across those grid
cells.
This can be seen in the
header and footer of this
layout.
@media (min-width: 550px) {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
}
}
67. Repeating the name of an
area causes the area to
span across those grid
cells.
This can be seen in the
header and footer of this
layout.
@media (min-width: 550px) {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
" . footer"
}
}
70. Named grid areas create
four implicit named lines.
You can use these in the
same way as lines you
have explicitly named.
.wrapper {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
}
}
.test {
z-index: 100;
background-color: red;
grid-column: content-start;
grid-row: content-start / footer-end;
}
71.
72. Items on the Grid can be layered
using the z-index property.
74. 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>
75. With CSS Grid Layout we describe the
layout in the CSS and can redefine
that description at any breakpoint.
77. 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>
78.
79. 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>
80. 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(12, [col] 1fr );
grid-template-rows: repeat(5, [row] auto) ;
grid-column-gap: 1em;
grid-row-gap: 15px;
}
81. 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.
The box is placed in the
first line named row and
spans 1 line - the default.
.box1 {
grid-column: col / span 4;
grid-row: row ;
}
82. Placing box8 on the grid.
Starting on column line 7,
spanning 3 lines.
In the 3rd row named row,
spanning 1 line.
.box8 {
grid-column: col 7 / span 3;
grid-row: row 3 ;
}
83.
84. With Grid Layout we can
easily span rows just like
columns.
.box1b {
grid-column: col / span 4;
grid-row: row / span 2;
}
.box2b {
grid-column: col 5 / span 4;
grid-row: row / span 3;
}
97. A list containing images.
The landscape images are
inside a list item with a
class of ‘landscape’.
<ul class="wrapper">
<li><h3>1.</h3>
<img src="gallery1.jpg" alt="Balloons"></li>
<li class="landscape"><h3>2.</h3>
<img src="gallery2.jpg" alt="Balloons"></li>
<li class="landscape"><h3>3.</h3>
<img src="gallery8.jpg" alt="Balloons"></li>
<li><h3>4.</h3>
<img src="gallery4.jpg" alt="Balloons"></li>
<li><h3>7.</h3>
<img src="gallery5.jpg" alt="Balloons"></li>
<li class="landscape"><h3>6.</h3>
<img src="gallery6.jpg" alt="Balloons"></li>
<li><h3>7.</h3>
<img src="gallery9.jpg" alt="Balloons"></li>
</ul>
98. I have created a grid of
four equal columns.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
99.
100. When using automatic
placement we can create
rules for items in our
document - for example
displaying portrait and
landscape images
differently.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.landscape {
grid-column-end: span 2;
}
101. grid-auto-flow
The default value of grid-auto-flow is
sparse. Grid will move forward placing
items skipping cells if items do not fit .
102. With a dense packing
mode grid will move items
out of source order to
backfill spaces.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: dense;
}
.landscape {
grid-column-end: span 2;
}
106. CSS Box Alignment Module Level 3
“This module contains the features of CSS relating to the
alignment of boxes within their containers in the various CSS box
layout models: block layout, table layout, flex layout, and grid
layout.” - https://drafts.csswg.org/css-align/
107. I can create this same
layout with flexbox or Grid.
With flexbox the items are
laid out in a row.
.wrapper {
display: flex;
}
.wrapper li {
flex: 1 0 25%;
}
108. I can create this same
layout with flexbox or Grid.
For Grid I use a single row,
4 column Grid.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
109. Flexbox alignment
properties for the three
landscape images.
http://cssgrid.me/051627
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth-child(3) {
align-self: flex-start;
}
.wrapper li:nth-child(4) {
align-self: flex-end;
}
110. Grid alignment properties
for the three landscape
images.
http://cssgrid.me/051628
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth-child(3) {
align-self: start;
}
.wrapper li:nth-child(4) {
align-self: end;
}
120. Using the minmax()
function with grid-auto-
rows.
.home-hero {
display: grid;
grid-gap: 1px;
grid-auto-rows: minmax(150px, auto);
}
121. An item on the grid can
become a grid or flex
container itself.
In this case I am using
flexbox and auto margins
to push my content to the
bottom of the box.
.special {
display: flex;
flex-direction: column;
}
.special h3{
margin-top: auto;
}
124. Power and responsibility
• Good = creating the most accessible source
order and using Grid or Flexbox to get the
optimal display for each device.
• Bad = using Grid or Flexbox as an excuse to
forget about the source.
• Terrible - stripping out semantic elements to
make everything a grid or flex item.
127. Léonie Watson | On CSS accessibility
and drinking tea | CSS Day 2016
https://vimeo.com/180566024
Also see:
http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
136. A feature query looks like
a media query.
Test for a property and
value pair.
// code for non-grid browsers
@supports (display: grid) {
// grid layout code here
}
137. To use feature queries
• Write CSS for browsers without support
• Override those properties inside the feature
queries
• See https://hacks.mozilla.org/2016/08/using-
feature-queries-in-css/