Loading...
Please wait.
Join LetsLearnLights for expert coding and programming guidance. Study popular languages like Java, Python and JavaScript. Improve your skills today

CSS Grid Layout: Properties, Values, and Code Examples with Preview

Mnzr chauhanMnzr chauhan January 27, 2023

Description:

CSS Grid is a layout system for the web that allows developers to create two-dimensional grid-based layouts using CSS. It enables the creation of complex and responsive designs that were previously difficult or impossible to achieve with traditional CSS layout methods such as floats and positioning. It allows for the alignment of items on a grid, as well as the ability to specify rows and columns and how they should behave when resizing the browser window. It is supported by most modern web browsers.

Headlines.

  1. CSS Grid: The Future of Web Design is a powerful tool that allows for the creation of complex and responsive layouts. It allows designers to easily create grid-based designs with minimal code, making it a game-changer for web design.
  2. Mastering CSS Grid: The Key to Crafting Dynamic Layouts has the ability to create dynamic, responsive layouts that adapt to different screen sizes. It offers a new level of control over the layout of web pages, making it an essential skill for web designers.
  3. CSS Grid has revolutionized the way we design websites. It allows for more flexibility and control over the layout of web pages, making it easier to create responsive and dynamic designs.
  4. CSS Grid is quickly becoming a must-have skill for web designers. It allows for the creation of complex and responsive layouts, making it an essential tool for crafting modern websites.
  5. CSS Grid is a powerful tool that offers a new level of control over the layout of web pages. It allows for the creation of flexible and responsive designs, making it a valuable tool for web designers looking to create modern and engaging websites.

Advertise...

Explain in Details.

Like "flex" display: grid; also works in conjunction with other css properties. There are several CSS properties that can be used in conjunction with grid layouts.
For Example:
grid-template-columns, grid-template-rows, grid-column-gap, grid-row-gap, grid-column, grid-row, justify-items, align-items, justify-content, align-content, grid-area, grid-template-areas, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-row-start, grid-row-end, grid-column-start, grid-column-end and grid-gap.

grid-template-columns

The grid-template-columns property is used to define the number of columns and their widths in a grid layout. It works in conjunction with the grid-template-rows property, which defines the number of rows and their heights.

The syntax for grid-template-columns is as follows:
grid-template-columns: <track-size> ... | <track-list>;

Where <track-size> is the width of a column, and <track-list> is a list of column widths separated by spaces.
For example, if we wanted to create a grid with 3 columns of equal width, we could use the following code:

grid-template-columns: 1fr 1fr 1fr;
The fr unit stands for "fraction of available space", and it will divide the available space into equal parts.
Another example, if we want to create a grid with 2 columns, first one is 150px width and second one is auto width. we could use the following code:
grid-template-columns: 150px auto;
It is also possible to use a combination of different units such as px, em, rem, vw, % etc.
You can also use the repeat function to repeat certain widths multiple times. like:
grid-template-columns: repeat(3, 1fr);

This will create 3 columns with the width of 1fr

It's important to note that the number of values provided to grid-template-columns should match the number of columns you want to create. If there are more values than columns, the excess values will be ignored, and if there are fewer values than columns, the remaining columns will have a width of auto. 

<style>
    .grid-container1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    /*
        to make grid item cleared to view we styled them
        We don't need to described again and again
        This CSS will be used for following all
        element of class "grid-item".
    */
    .grid-item {
        border: 1px solid black;
        margin: 5px;
        padding: 5px;
    }
</style>
<div class="grid-container1">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
</div>
Element 1
Element 2
Element 3

grid-template-rows

grid-template-rows is a CSS property that is used to define the number of rows and their sizes in a grid layout. It allows you to specify the size of each row in the grid, using fixed values (such as pixels or percentages) or flexible values (such as fr units)..

Here is an example of how to use grid-template-rows to define a grid with two rows, where the first row has a fixed height of 100px and the second row takes up the remaining space: 


<style>
    .grid-container2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100px 1fr;
    }
</style>
<div class="grid-container2">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9

In this example, the grid-template-rows property is set to 100px 1fr. This tells the browser to create a grid with two rows, the first with a fixed height of 100 pixels, and the second row taking up the remaining space. The grid-template-columns property is set to repeat(3, 1fr) which tells the browser to create 3 columns each taking up 1 fraction unit of the available space.

Note that the repeat() function can also be used for grid-template-rows to create a series of rows with the same size. The first value inside the repeat() function is the number of times the size should be repeated, and the second value is the size of each row.
You can also use a combination of fixed and flexible units to create more complex grid layouts. For example: 

<style>
    .grid-container3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100px 2fr 1fr;
    }
</style>
<div class="grid-container3">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
This tells the browser to create a grid with 3 rows, the first with a fixed height of 100 pixels, the second row takes up 2 fraction unit of the remaining space, and the third row takes up 1 fraction unit of the remaining space.
It's important to note that the grid-template-rows property must be used in conjunction with the display: grid property, and the grid-template-columns property to create a grid layout.

grid-column-gap & grid-row-gap

grid-column-gap and grid-row-gap are CSS properties used to set the size of the gap between columns and rows, respectively, in a grid layout.

Here's an example of how they can be used:


<style>
    .grid-container4 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);  /* 3 columns with equal widths */
        grid-template-rows: repeat(2, 100px); /* 2 rows with a height of 100px */
        grid-column-gap: 10px; /* 10px gap between columns */
        grid-row-gap: 20px; /* 20px gap between rows */
    }
</style>
<div class="grid-container4">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9

In this example, we have a grid-container element that is set to display as a grid. The grid-template-columns property is set to create 3 columns with equal widths (1fr stands for "fraction of available space"). The grid-template-rows property is set to create 2 rows with a height of 100px. Finally, the grid-column-gap property is set to 10px, which will create a 10px gap between each column, and the grid-row-gap is set to 20px, which will create a 20px gap between each row.

It's important to note that the gap properties only create space between grid items and not around the grid container. If you want to add space around the grid container, you can use padding or margin properties.
You can also use the shorthand property grid-gap as well, which takes two values first for row gap and second for column gap.
grid-gap: 20px 10px;
This will create 20px gap between rows and 10px gap between columns.

grid-column and grid-row

The grid-column and grid-row properties are used to position items within a grid.

Here is an example of how to use grid-column and grid-row to position items within a grid: 
<
style>
    .grid-container5 {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;  /* Creates three columns with equal width */
        grid-template-rows: 100px 200px;  /* Creates two rows with specified height */
    }

    .grid-container5>div:nth-child(1) {
        grid-column: 2 / 3;  /* Span the item across the second and third columns */
        grid-row: 1 / 2;  /* Span the item across the first and second rows */
    }

    .grid-container5>div:nth-child(2) {
        grid-column: 1 / 2;  /* Span the item across the first and second columns */
        grid-row: 2 / 3;  /* Span the item across the second and third rows */
    }
</style>
<div class="grid-container5">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9

In this example, we first create a container element with the class of "container" which is set to display as a grid. We then set the number of columns and rows in the grid using the grid-template-columns and grid-template-rows properties. Next, we have two items with the classes "item-1" and "item-2" which we position within the grid using the grid-column and grid-row properties.

In particular, with the class "item-1", it will span the item across the second and third columns, and across the first and second rows. And for the class "item-2", it will span the item across the first and second columns, and across the second and third rows.

justify-items

justify-items is a CSS property that is used to align the items within a grid container along the horizontal (row) axis. It can be used to align items to the start, end, center, or stretch them to fill the full width of the grid container.

Here is an example of using justify-items to center align the items within a grid container: 

<style>
    .grid-container6 {
        display: grid;
        justify-items: center; /* This will center align the items horizontally */
    }
    .grid-container7 {
        display: grid;
        justify-items: stretch; /* This will stretch the items to fill the full width of the container */
    }
</style>
<h2>justify-items: center</h2>
<div class="grid-container6">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
<h2>justify-items: stretch</h2>
<div class="grid-container7">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>

justify-items: center

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9

justify-items: stretch

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Note:
justify-items is shorthand for justify-self and justify-content
justify-self is used to align individual grid items and justify-content used to align the entire grid.
justify-items in CSS grid can take the following values:
  • start: aligns grid items to the start edge of the grid container along the horizontal axis.
  • end: aligns grid items to the end edge of the grid container along the horizontal axis.
  • center: aligns grid items to the center of the grid container along the horizontal axis.
  • stretch: stretches grid items to fill the full width of the grid container along the horizontal axis.
  • baseline: aligns grid items along their baseline along the horizontal axis.
  • first baseline: aligns grid items along their first baseline along the horizontal axis.
  • last baseline: aligns grid items along their last baseline along the horizontal axis.
  • unset: This is the default value. It will inherit the value from its parent.

lign-items

align-items is a CSS property used to align elements within a grid container. This allows you to control the vertical alignment of grid items within the grid container.

Here's an example of how to use align-items :

<style>
    .grid-container8 {
        display: grid;
        align-items: center; /* This aligns the items in the middle of the grid container */
        grid-template-columns: repeat(2, 1fr); /* This creates a 2-column grid */
    }
</style>
<div class="grid-container8">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
In this example, the "align-items" property is set to "center", which aligns the items in the middle of the grid container. The "grid-template-columns" property creates a 2-column grid, and the items will be centered vertically within each column.

CSS Grid Layout has several possible values for the "align-items" property, which is widely supported by most modern browsers. These values include:

  • "start" - aligns items to the top of the grid container 
  • "end" - aligns items to the bottom of the grid container 
  • "center" - aligns items in the middle of the grid container 
  • "stretch" - stretches items to fill the entire height of the grid container 
  • "baseline" - aligns items along the baseline of the text within the items 
  • "first baseline" - aligns items to the first baseline of the grid container 
  • "last baseline" - aligns items to the last baseline of the grid container
It's worth noting that some of the above values, such as "first baseline" and "last baseline", may not be fully supported by all browsers and may require a prefix for cross-browser compatibility.

align-content

align-content is a CSS property that is used to align the grid items within a grid container. It works in conjunction with the display: grid property and is used to control the alignment of the items in the vertical axis (rows) of the grid.

Here's an example of how to use align-content :


<style>
    .grid-container9 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-content: center;
    }
</style>
<div class="grid-container9">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
In this example, we have a grid container with four grid items. The grid-template-columns property is used to create a grid with three columns and the align-content property is used to center the items vertically within the grid. The result is that the grid items will be aligned in the center of the grid container, with equal space above and below them.
Possible values for align-content include:
  • start (aligns items to the start of the grid container)
  • end (aligns items to the end of the grid container)
  • center (aligns items to the center of the grid container)
  • space-between (adds equal space between items)
  • space-around (adds equal space around items)
  • stretch (stretches items to fill the grid container)
Note: align-content only works when the grid container has multiple rows. If there is only one row, the align-content property has no effect.

grid-area

grid-area is a CSS property that is used to align the grid items within a grid container. It works in conjunction with the display: grid property and is used to control the alignment of the items in the vertical axis (rows) of the grid.

Here's an example of how to use grid-area :
<style>
    .grid-container-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .grid-container-area>.item-1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .grid-container-area>.item-2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .grid-container-area>.item-3 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .grid-container-area>.item-4 {
        grid-area: 2 / 2 / 3 / 3;
    }
</style>
<div class="grid-container-area">
    <div class="grid-item item-1">Item 1</div>
    <div class="grid-item item-2">Item 2</div>
    <div class="grid-item item-3">Item 3</div>
    <div class="grid-item item-4">Item 4</div>
</div>
Item 1
Item 2
Item 3
Item 4
In this example, we have a container element with a class of "grid-container" that is set to display as a grid. We then define the number of columns and rows in the grid using the grid-template-columns and grid-template-rows properties.
Next, we have four "grid-item" elements, each with their own class. Using the grid-area property, we specify the row and column positions for each element. The grid-area value is written in the format "row-start / column-start / row-end / column-end". For example, ".item-1" has a grid-area value of "1 / 1 / 2 / 2", which means it starts in the first row and first column, and spans to the second row and second column.
This results in a layout where the first element takes up the top left corner, the second element takes up the top right corner, the third element takes up the bottom left corner, and the fourth element takes up the bottom right corner.

grid-template-areas

grid-template-areas is a CSS property that allows developers to define the layout of a grid using a string of characters. The characters represent the different grid cells and can be used to create a visual representation of the grid layout. It is bit complicated then other properties.

For example, let's say we want to create a 3x3 grid with two cells in the top row, one cell in the middle row, and two cells in the bottom row. We can use the following code to define the grid-template-areas : 
<style>
    .grid-containerA {
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar content"
            "footer footer";
        /* In this example, "header" and "footer" represent the two cells in the top and bottom rows
        respectively, while "sidebar" and "content" represent the cells in the middle row.
        We can then use the grid-area property to assign specific elements to each cell in the grid. For example: */
    }

    .grid-containerA>#header {
        grid-area: header;
    }

    .grid-containerA>#sidebar {
        grid-area: sidebar;
    }

    .grid-containerA>#content {
        grid-area: content;
    }

    .grid-containerA>#footer {
        grid-area: footer;
    }
</style>
<div class="grid-containerA">
    <div class="grid-item" id="header">Element 1 header</div>
    <div class="grid-item" id="sidebar">Element 2 sidebar</div>
    <div class="grid-item" id="content">Element 3 content</div>
    <div class="grid-item" id="footer">Element 4 footer</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 3 content
In this example, the elements with the id of "header", "sidebar", "content", and "footer" will be assigned to the corresponding cells in the grid as defined by the grid-template-areas property.
Overall, grid-template-areas provides a convenient way to visually layout a grid and assign elements to specific cells in the grid.

grid-auto-columns and grid-auto-rows

grid-auto-columns and grid-auto-rows are CSS properties that allow you to define the size of automatically generated grid columns and rows. They are used when you have elements that you want to position on a grid, but you don't want to explicitly define the size of each column or row.

Here's an example of how you might use grid-auto-columns and grid-auto-rows : 
<style>
    .grid-containerB {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* define 3 equal-width columns */
        grid-auto-rows: 80px; /* automatically generate rows that are 50px tall */
    }
</style>
<div class="grid-containerB">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
In this example, the grid-template-columns property is used to create 3 equal-width columns, and the grid-auto-rows property is used to automatically generate rows that are 50px tall. Any elements that are placed within the .grid-container element will be positioned on this grid and will automatically take up one of the defined columns and rows.
You can also use the grid-auto-flow property to specify how the elements are placed on the grid. For example, if you set it to row, elements will be placed in the first row and then move to the next one. 


  <style>
    .grid-containerC {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* define 3 equal-width columns */
        grid-auto-rows: 80px; /* automatically generate rows that are 50px tall */
        grid-auto-flow: row; /* elements will be placed on the first row and then move to the next one */
    }
</style>
<div class="grid-containerC">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
In this case, if you have 5 elements, they will be placed in the first row (3 columns), then the second one (2 columns) because the grid has only 3 columns.

grid-area and grid-row-start - grid-row-end - grid-column-start - grid-column-end

The grid-area property is a shorthand property that allows you to specify the starting and ending positions of an element within a grid layout using a single line of code. It is a convenient way to define the position of an element within a grid without having to use multiple properties such as grid-row-start, grid-row-end, grid-column-start, and grid-column-end.
The syntax for the grid-area property is as follows:
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
For example, the following code positions an element in the second row and third column of a grid: 
<style>
    .grid-containerD {
        display: grid;
    }

    .grid-containerD>div:nth-child(3) { /* Third chiled div element of grid-containerD */
        display: grid;
        grid-area: 1 / 3 / 5 / 5;
    }
</style>
<div class="grid-containerD">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
In this example, the element will be placed in the second row and third column of the grid. The first value (1) represents the starting row, the second value (3) represents the starting column, the third value (5) represents the ending row, and the fourth value (5) represents the ending column like 
    grid-row-start: 1;
    grid-column-start: 3;
    grid-row-end: 5;
    grid-column-end: 5;
So third element starting in first row and third column and ending in 5th row and 5th column.
Note grid-area also used to named any grid element

<style>
    .gridarea-container {
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
    }

    .gridarea-container>.item {
        text-align: center;
    }

    .gridarea-container>.header {
        grid-area: header;
    }

    .gridarea-container>.sidebar {
        grid-area: sidebar;
    }

    .gridarea-container>.main {
        grid-area: main;
    }

    .gridarea-container>.footer {
        grid-area: footer;
    }
</style>
<div class="gridarea-container">
    <div class="item header">Header</div>
    <div class="item sidebar">Sidebar</div>
    <div class="item main">Main content</div>
    <div class="item footer">Footer</div>
</div>
Header
Sidebar
Main content
Footer

Final Lines.

CSS grid is a powerful layout tool that allows for the creation of complex and responsive designs. With its flexible grid system, designers can easily position elements on a page and create dynamic, responsive layouts. The ability to control the size and position of grid items using CSS properties makes it a versatile tool for creating layouts that adapt to different screen sizes and devices. Overall, CSS grid is a must-have tool for any designer looking to create modern and responsive web designs.
Additionally, CSS grid allows for easy manipulation of rows and columns, making it easy to create intricate layouts with minimal code. It also supports the use of grid templates, which allows for the creation of predefined grid structures that can be easily reused across multiple pages. With its wide range of features and capabilities, CSS grid is a powerful tool for creating professional-grade web designs. It is recommended for developers and designers who want to make the most out of their layout designs.
Posted by Mnzr chauhan
««« Thanks again for reading our blog. If you have any questions, feel free to ask. Your support is enough for us to share this post with your friends. And a good comment for our hard work. »»»
Thank you ツ
Mnzr chauhan

Posted by Mnzr chauhan

Post a Comment

2 Comments

Anonymous said…
It's really much explainable and a comprehensive Teaching methods.
February 2, 2023 at 11:41 PM
Anonymous said…
Thanks for such great explanation, it's a great source for me.
February 2, 2023 at 11:42 PM
Post a Comment