xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
2.2 kB
60 lines
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Responsive Grid Text Layout</title>
7 <style>
8 .grid-container {
9 display: grid;
10 /* Creates columns that are at least 250px wide, and automatically fit as many as possible */
11 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
12 gap: 2rem;
13 padding: 2rem;
14 max-width: 1200px;
15 margin: 0 auto;
16 }
17
18 .grid-item {
19 background: #f5f5f5;
20 padding: 1.5rem;
21 border-radius: 8px;
22 line-height: 1.6;
23 }
24
25 body {
26 margin: 0;
27 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28 color: #333;
29 }
30
31 h1 {
32 text-align: center;
33 padding: 2rem;
34 margin: 0;
35 background: #f0f0f0;
36 }
37 </style>
38</head>
39<body>
40 <h1>Responsive Grid Layout</h1>
41 <div class="grid-container">
42 <div class="grid-item">
43 <h2>First Column</h2>
44 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
45 </div>
46 <div class="grid-item">
47 <h2>Second Column</h2>
48 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
49 </div>
50 <div class="grid-item">
51 <h2>Third Column</h2>
52 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
53 </div>
54 <div class="grid-item">
55 <h2>Fourth Column</h2>
56 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.</p>
57 </div>
58 </div>
59</body>
60</html>