A playground for learning HTML & CSS

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Testing

Good job finding this little prompt. Thank you, too. I appreciate the engagement.<br> Well, these cards have been an interesting first 'project' for sure. Whilst the majority of the code is my own input, I realise (half way through - I'm still not particularly happy with the results) I was far too reliant on CoPilot. I would still absolutely recommend it as a learning tool, and development tool. The amount of shit I've learned in a few days is.. Unreal. It opens a huge door for knowledge, and is engaging enough to feel like an actual teacher. Granted, a teach who is constantly incorrect, and breaks your code on a regular basis. But shit, it's all about that code vocab.<br> My second 'project', flexbox, uses only my own input. In the future, I'll be adding snippets of code for 'ease of access'. It'll be in relation to whatever comes of this page. Still need to make it nice and pretty. I guess this card turned out to be an unintended mini dev log.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Testing 2

<b>Responsive Grid</b><br>Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Grid Container CSS

The barebones of how the grid works. Opposite to flexbox, grid container retains the grid format in a more 'static' way. I'm a pretty big fan of the customizability it offers. It seems that every .card I have placed within is fully responsive - to an extent. Scaling the screen size seems to increase the entire row size dependant of content within the P. I guess this is the downside of not using flexbox. Probably best to use this when there is a character limit, or with only 4-6 cards per grid. The pretty awesome thing I discovered is if you add a hover to the card (click activate), the grid automatically resizes to the content. Pretty sweet. I guess a workaround in the meanwhile is to center/align/justify (still trying to remember which one) h2 & P to the center of the card.

Grid Container 1 & 2

.grid-container {
                    position: relative;
                    display: grid;
                    border: 4px solid transparent;
                    border-radius: 15px;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 10px;
                    justify-content: center;
                    margin-top: 30px;
                    margin-bottom: var(--max-negative-margin-bottom);
                }

                .grid-container::before {
                    content: '';
                    position: absolute;
                    top: -20px;
                    left: -20px;
                    right: -20px;
                    bottom: -20px;
                    z-index: -1;
                    border-radius: inherit;
                    background: linear-gradient(to right, rgba(13, 13, 20, 0.7), rgba(75, 82, 92, 0.3));
                    box-shadow: 0 0 0 20px rgba(13, 13, 20, 0.158);
                }

                .grid-container2 {
                    position: relative;
                    display: grid;
                    border: 4px solid transparent;
                    border-radius: 15px;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 10px;
                    justify-content: center;
                    margin-top: 30px;
                }

                .grid-container2::before {
                    content: '';
                    position: absolute;
                    top: -20px;
                    left: -20px;
                    right: -20px;
                    bottom: -20px;
                    z-index: -1;
                    border-radius: inherit;
                    background: linear-gradient(to right, rgba(75, 82, 92, 0.3), rgba(13, 13, 20, 0.7));
                    box-shadow: 0 0 0 20px rgba(13, 13, 20, 0.079);
                }

                @media (max-width: 1200px) {
                    html {
                        font-size: 1.5vw;
                    }
                    h1 {
                        font-size: 2rem;
                    }
                    .card {
                        font-size: 1.1rem;
                    }
                }

                @media (max-width: 768px) {
                    html {
                        font-size: 1.6vw;
                    }
                    h1 {
                        font-size: 2rem;
                    }
                    .card {
                        font-size: 1.2rem;
                    }
                    .card h2 {
                        font-size: 1.5rem;
                        word-break: break-word;
                    }
                    .grid-container {
                        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                        margin-top: 20px;
                    }
                    .grid-container2 {
                        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                        margin-top: 20px;
                    }
                }

                @media (min-width: 1200px) {
                    .card {
                        font-size: 1.05rem;
                    }
                }

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

A QUICK FIX...

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.