Contenu connexe Similaire à Introduction to CSS Grid (20) Introduction to CSS Grid2. ABOUT ME
Will stop to pet any dog I see
Nashville native
Retired ballerina
Former music publicist
Web Developer at Lewis Communications
Co-organizer for Tech Ladies
4. “More than a layout module, CSS Grid is an invitation
to reaffirm our original intent with web design and
development: to create accessible, extensible solutions
that bring content to those interested in the best way
possible.
At the core of any front-end web project is a simple
principle: First, make it accessible, then make it
fancy, and make sure the fancy doesn’t break
accessibility.”
Morten Rand-Hendriksen
17. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 20rem);
}
18. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
grid-gap: 1rem;
}
20. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
grid-template-rows: 10rem 15rem;
grid-gap: 1rem;
}
22. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 1rem;
}
23. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 10rem);
grid-gap: 1rem;
}
24. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 1rem;
}
25. <div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: auto 2fr 1fr;
grid-gap: 1rem;
}
27. <div class="grid">
<div class="item">1</div>
<div class="item pupper"> </div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.pupper {
width: 30rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.pupper {
grid-column: span 2;
}
28. <div class="grid">
<div class="item">1</div>
<div class="item pupper"> </div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.pupper {
grid-column: span 3;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-auto-flow: dense;
}
.pupper {
grid-column: span 3;
}
29. <div class="grid">
<div class="item">1</div>
<div class="item pupper"> </div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.pupper {
grid-column: span 2;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.pupper {
grid-column: 1 / 3;
}
31. <div class="grid">
<div class="item1">Sidebar #1</div>
<div class="item2">Doggo ipsum filler</div>
<div class="item3">Another sidebar</div>
<div class="footer">Footer</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
grid-template-areas:
“sidebar-1 content sidebar-2”
“sidebar-1 content sidebar-2”
“footer footer footer”;
}
32. <div class="grid">
<div class="item1">Sidebar #1</div>
<div class="item2">Doggo ipsum filler</div>
<div class="item3">Another sidebar</div>
<div class="footer">Footer</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
grid-template-areas:
“sidebar-1 content sidebar-2”
“sidebar-1 content sidebar-2”
“footer footer footer”;
}
.item1 {
grid-template-area: sidebar-1;
}
.item2 {
grid-template-area: content;
}
.item3 {
grid-template-area: sidebar-2;
}
.footer {
grid-template-area: footer;
}
34. RESOURCES
● Wes Bos’ CSS Grid
● CSS Grid Garden
● My article on CSS Grid
GRID TUTORIALS
OTHER RESOURCES
● Info on fallbacks for IE: CSS Grid + Autoprefixer
● Grid by Example
WHAT’S NEXT FOR GRID?
● CSS Grid Level 2 Subgrids