Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c1b3a27

Browse files
committed
Add css grid irregular layout example
1 parent cc00e66 commit c1b3a27

File tree

5 files changed

+97
-0
lines changed

5 files changed

+97
-0
lines changed
490 KB
Loading[フレーム]
583 KB
Loading[フレーム]
267 KB
Loading[フレーム]
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;900&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
<title>CSS Irregular Layout</title>
15+
</head>
16+
<body>
17+
<main>
18+
<header>
19+
<h1>Give yourself a chance to see the world</h1>
20+
<p class="description1">
21+
Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet
22+
porta sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque
23+
platea velit volutpat magna sem. Elit eu sit facilisi nullam neque
24+
tincidunt sed volutpat metus. Amet sed at sed ante senectus sit
25+
bibendum tincidunt eu.
26+
</p>
27+
<img src="./images/travel1.png" alt="travel" class="image1" />
28+
<img src="./images/travel2.png" alt="travel" class="image2" />
29+
<img src="./images/travel3.png" alt="travel" class="image3" />
30+
<p class="description2">
31+
Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet
32+
porta sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque
33+
platea velit volutpat magna sem. Elit eu sit facilisi nullam neque
34+
tincidunt sed volutpat metus. Amet sed at sed ante senectus sit
35+
bibendum tincidunt eu.
36+
</p>
37+
</header>
38+
</main>
39+
</body>
40+
</html>
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: "Raleway", sans-serif;
6+
}
7+
8+
main {
9+
width: 80vw;
10+
margin: 0 auto;
11+
}
12+
13+
p {
14+
font-size: 16px;
15+
padding: 24px 0;
16+
line-height: 1.5em;
17+
}
18+
19+
header {
20+
display: grid;
21+
grid-template-columns: 6fr 1fr 1fr 3fr 5fr 1fr;
22+
grid-template-rows: 40px repeat(6, auto);
23+
}
24+
25+
h1 {
26+
grid-column: 1 / span 3;
27+
grid-row: 2 / 3;
28+
font-size: 65px;
29+
font-weight: 900;
30+
z-index: 10;
31+
}
32+
33+
.description1 {
34+
grid-column: 1 / 2;
35+
grid-row: 3 / 4;
36+
}
37+
38+
.image1 {
39+
grid-column: 1 / 2;
40+
grid-row: 4 / span 2;
41+
}
42+
43+
.image2 {
44+
grid-column: 3 / span 3;
45+
grid-row: 1 / span 6;
46+
}
47+
48+
.image3 {
49+
grid-column: 5 / span 2;
50+
grid-row: 5 / span 3;
51+
}
52+
53+
.description2 {
54+
grid-column: 1 / span 4;
55+
grid-row: 7 / 8;
56+
padding-right: 48px;
57+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /