# Activity 27: CSS GRID

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](http://README.md) of your repo - Submit github repositories.

Good afternoon this is my GRID CSS ACTIVITY 27

CODE:

```css
/* 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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729265575198/07d614ab-ab1c-481b-9cbc-1695a85dea88.png align="center")

OUTPUT:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729265592077/2de48bd2-2b62-4860-adc6-1da9ae566dc6.png align="center")

OUTPUT:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729265608654/e0442f45-7d24-4f59-a9b7-3a1ec28396ab.png align="center")

OUTPUT:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729265637361/dcf2312f-0c96-481d-8f47-19139d03c3fc.png align="center")

OUTPUT:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729265648812/ddbc444e-1761-4005-ba2a-c62458e6c33a.png align="center")

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