Grid Template Areas Example

# CSS Grid and Media Queries ## **CSS Grid** CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. It allows you to define rows and columns in a container, and place child elements within this grid. Here's an in depth explanation about `grid` properties: ### **Container Properties:** 1. ### `display: grid` To start using CSS Grid, you need to set the container's `display` property to `grid`. ```css .container { display: grid; } ``` 2. ### `grid-template-columns` The `grid-template-columns` property defines the number and width of the columns in the grid container. ```css .container { grid-template-columns: 100px 200px auto; } ``` * It defines that there will be 3 columns with first `100px`, second `200px`, and the third takes up the remaining space `auto`. 3. ### `grid-template-rows` The `grid-template-rows` property defines the number and height of the rows in the grid container. ```css .container { grid-template-rows: 50px 100px auto; } ``` * It defines that there will be 3 rows with first `50px`, second `100px`, and the third takes up the remaining space `auto`. 4. ### `grid-auto-rows` The `grid-auto-rows` property specifies the size of rows that are created implicitly (not explicitly defined in `grid-template-rows`). ```css .container { grid-auto-rows: 100px; } ``` * Any rows created automatically will be `100px` high. 5. ### `gap` The `gap` property (formerly known as `grid-gap`) sets the spacing between rows and columns. ```css .container { gap: 10px 20px; /* gap:

; */ } ``` * There will be a `10px` gap between rows and a `20px` gap between columns. 6. ### `grid-template-areas` The `grid-template-areas` property allows you to define named grid areas within the grid container. ```css .container { grid-template-areas: "header header" "sidebar main" "footer footer"; } header { grid-area: header; } sidebar { grid-area: sidebar; } main { grid-area: main; } footer { grid-area: footer; } ``` ```xml Grid Template Areas Example

Header

Sidebar

Main

``` * The grid layout will have a header taking (spanning) two columns, a sidebar and main area in the second row, and a footer taking (spanning) two columns in the third row. 7. ### `justify-content` The `justify-content` property aligns the grid container's content along the inline (row) axis. There are seven values in this property as mentioned below: * `start` * `end` * `center` * `stretch` * `space-between` * `space-around` * `space-evenly` ```css .container { justify-content: center; } ``` * The grid items will be centered horizontally. 8. ### `align-content` The `align-content` property aligns the grid container's content along the block (column) axis. There are seven values in this property as mentioned below: * `start` * `end` * `center` * `stretch` * `space-between` * `space-around` * `space-evenly` ```css .container { align-content: center; } ``` * The grid items will be centered vertically. 9. ### `align-items` The `align-items` property aligns grid items along the block (column) axis within their grid area. There are four values in this property as mentioned below: * `start` * `end` * `center` * `stretch` (default) ```css .container { align-items: center; } ``` * Each grid item will be centered within its grid area vertically. 10. ### `grid-column-start` **and** `grid-column-end` The `grid-column-start` and `grid-column-end` properties specify the grid item's starting and ending column line. ```css .item1 { grid-column-start: 1; /* grid-column-start: ; */ grid-column-end: 3; /* grid-column-end: ; */ } ``` * The grid item will span from the first to the third column. 11. ### `grid-column` The `grid-column` property is a shorthand for setting `grid-column-start` and `grid-column-end`. ```css .item1 { grid-column: 1 / 3; /* grid-column: / ; */ } ``` * The grid item will span from the first to the third column. 12. ### `grid-row` The `grid-row` property is a shorthand for setting `grid-row-start` and `grid-row-end`. ```css .item1 { grid-row: 1 / 3; /* grid-row: / ; */ } ``` * The grid item will span from the first to the third row. 13. ### `grid-area` The `grid-area` property specifies a grid item's location and size within the grid, combining `grid-row-start`, `grid-column-start`, `grid-row-end`, and `grid-column-end`. ```css .item1 { grid-area: 1 / 1 / 3 / 3; /* grid-area: / / / ; */ } ``` * The grid item will span from row 1 to 3 and column 1 to 3. ### **Here's an example using all these properties** ```css .container { display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 50px 100px auto; gap: 10px 20px; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; justify-content: center; align-content: center; align-items: stretch; height: 500px; border: 2px solid black; } .header { grid-area: header; background-color: lightblue; } .sidebar { grid-area: sidebar; background-color: lightcoral; } .main { grid-area: main; background-color: lightgreen; } .footer { grid-area: footer; background-color: lightyellow; } ``` ```xml CSS Grid Example

Main

``` Explanation of the code: * `grid-template-columns` and `grid-template-rows`: Define three columns and three rows of varying sizes. * `gap`: Sets a 10px gap between rows and a 20px gap between columns. * `grid-template-areas`: Defines named areas within the grid. * `justify-content` and `align-content`: Center the entire grid within the container. * `align-items`: Stretches the grid items to fill their grid areas vertically. ### **Item Properties:** 1. ### `justify-self` The `justify-self` property aligns the grid item along the inline (row) axis within its grid area. This property is used to override the container's `justify-items` property for individual items. There are four values in this property: * `start`: Aligns the item at the start of the grid area. * `end`: Aligns the item at the end of the grid area. * `center`: Centers the item within the grid area. * `stretch`: Stretches the item to fill the grid area (default). ```css .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .item1 { justify-self: start; background-color: lightblue; } .item2 { justify-self: end; background-color: lightcoral; } .item3 { justify-self: center; background-color: lightgreen; } .item4 { justify-self: stretch; background-color: lightyellow; } ``` * `.item1` is aligned at the start of its grid area. * `.item2` is aligned at the end of its grid area. * `.item3` is centered within its grid area. * `.item4` is stretched to fill its grid area. 2. ### `align-self` The `align-self` property aligns the grid item along the block (column) axis within its grid area. This property is used to override the container's `align-items` property for individual items. There are four values in this property: * `start`: Aligns the item at the start of the grid area. * `end`: Aligns the item at the end of the grid area. * `center`: Centers the item within the grid area. * `stretch`: Stretches the item to fill the grid area (default). ```css .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .item1 { align-self: start; background-color: lightblue; } .item2 { align-self: end; background-color: lightcoral; } .item3 { align-self: center; background-color: lightgreen; } .item4 { align-self: stretch; background-color: lightyellow; } ``` * `.item1` is aligned at the start of its grid area. * `.item2` is aligned at the end of its grid area. * `.item3` is centered within its grid area. * `.item4` is stretched to fill its grid area. Here's an example using these both properties: ```css .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; gap: 10px; height: 350px; border: 2px solid black; } .item1 { justify-self: start; align-self: start; background-color: lightblue; } .item2 { justify-self: end; align-self: end; background-color: lightcoral; } .item3 { justify-self: center; align-self: center; background-color: lightgreen; } .item4 { justify-self: stretch; align-self: stretch; background-color: lightyellow; } ``` ```xml CSS Grid Item Properties Example

Item 1

Item 2

Item 3

Item 4

``` * `.item1`: Aligned at the start on both axes. * `.item2`: Aligned at the end on both axes. * `.item3`: Centered on both axes. * `.item4`: Stretched to fill the grid area on both axes. We can achieve a layout using CSS flex as well, and CSS grid can do as much as CSS flex can do. But CSS grid has much more power while creating a grid-like layout hence these properties exists inside our CSS. We have more control over our layout design in two dimensions as compared to CSS flex that as one dimension only. ## **Media Queries** Media queries are used in CSS to apply different styles for different devices and screen sizes. They help us to create responsive designs that adapt to various screen resolutions. Here are media queries for the specified sizes and the common devices they are associated with: 1. ### `640px` **for Mobile Phones** ```css @media only screen and (max-width: 640px) { /* Styles for mobile phones */ body { background-color: lightblue; } } ``` 2. ### `768px` **for Tablets** ```css @media only screen and (max-width: 768px) { /* Styles for tablets */ body { background-color: lightgreen; } } ``` 3. ### `1024px` **for Laptops** ```css @media only screen and (max-width: 1024px) { /* Styles for small laptops or large tablets */ body { background-color: lightcoral; } } ``` 4. ### `1280px` **for Desktops** ```css @media only screen and (max-width: 1280px) { /* Styles for desktops and larger laptops */ body { background-color: lightgoldenrodyellow; } } ``` 5. ### `1536px` **for Wider Desktops and Monitors** ```css @media only screen and (max-width: 1536px) { /* Styles for large desktops and high-resolution monitors */ body { background-color: lightpink; } } ``` Here's a combined example of Media Query: ```css /* Base styles */ body { font-family: Arial, sans-serif; } /* Mobile phones (max-width: 640px) */ @media only screen and (max-width: 640px) { body { background-color: lightblue; font-size: 14px; } } /* Tablets (max-width: 768px) */ @media only screen and (max-width: 768px) { body { background-color: lightgreen; font-size: 16px; } } /* Laptops (max-width: 1024px) */ @media only screen and (max-width: 1024px) { body { background-color: lightcoral; font-size: 18px; } } /* Desktops (max-width: 1280px) */ @media only screen and (max-width: 1280px) { body { background-color: lightgoldenrodyellow; font-size: 20px; } } /* Large desktops and high-resolution monitors (max-width: 1536px) */ @media only screen and (max-width: 1536px) { body { background-color: lightpink; font-size: 22px; } } ``` By using `@media only screen and`, these media queries ensure that your web content is responsive and adapts to different devices ranging from mobile phones to large desktop monitors. `TIP`: There's a great rule which many CSS frameworks follow, they always follow a mobile first design, It's easy to create responsive designs for creating small screen to bigger screens. We should always follow this rule as well even if we are not using any CSS framework.