xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
2.2 kB
72 lines
1<script>
2 import MultiColumn from '$jibs/MultiColumn.svelte';
3
4 const content = [
5 `<div class="content">
6 <h2>Understanding CSS Grid</h2>
7 <p>CSS Grid is a powerful layout system that allows for complex two-dimensional layouts.
8 It can handle both rows and columns simultaneously, making it perfect for modern web design.</p>
9 </div>`,
10
11 `<div class="content">
12 <h2>Responsive Design</h2>
13 <p>Modern websites need to work across all device sizes. Using minmax() with auto-fit
14 creates a responsive layout that automatically adjusts based on viewport width.</p>
15 </div>`,
16
17 `<div class="content">
18 <h2>Performance Optimization</h2>
19 <p>Grid layouts can significantly improve performance compared to older methods like
20 floating elements. They provide better control over spacing and alignment.</p>
21 </div>`,
22
23 `<div class="content">
24 <h2>Browser Support</h2>
25 <p>CSS Grid is now supported in all modern browsers, making it a reliable choice for
26 production websites. It gracefully degrades in older browsers when needed.</p>
27 </div>`,
28
29 `<div class="content">
30 <h2>Best Practices</h2>
31 <p>When using Grid, it's important to consider content flow and readability.
32 Breaking content into logical sections helps users scan and understand information quickly.</p>
33 </div>`
34 ];
35</script>
36
37<main>
38 <h1>Grid Layout Demo</h1>
39 <MultiColumn items={content} minColumnWidth="300px" />
40</main>
41
42<style>
43 main {
44 padding: 2rem;
45 max-width: 1400px;
46 margin: 0 auto;
47 }
48
49 h1 {
50 margin-bottom: 2rem;
51 text-align: center;
52 }
53
54 :global(.content) {
55 background: #f5f5f5;
56 padding: 1.5rem;
57 border-radius: 8px;
58 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
59 }
60
61 :global(.content h2) {
62 margin-top: 0;
63 color: #2c3e50;
64 font-size: 1.5rem;
65 }
66
67 :global(.content p) {
68 line-height: 1.6;
69 color: #34495e;
70 margin-bottom: 0;
71 }
72</style>