Skip to main content

Command Palette

Search for a command to run...

Activity 27: CSS GRID

Published
•1 min read•View as Markdown
Activity 27: CSS GRID
B

SMILING EVERYDAY FOR GOODIE.

apply it on 5 pages (ex. list of products,list of employees, list of students, etc) - name your repo CSS_GRID - add documentation on README.md of your repo - Submit github repositories.

Good afternoon this is my GRID CSS ACTIVITY 27

CODE:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1em 0;
}

.grid-container {

    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px;
    place-items: center;
}

.grid-item {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    text-align: center;
    padding: 20px;
}

OUTPUT:

OUTPUT:

OUTPUT:

OUTPUT:

OUTPUT:

Here’s my github repository link: johnruzzelbacia/CSS-GRID (github.com)

More from this blog

Bacia, John Ruzzel A.'s blog

42 posts