Welcome to Part 2 of Mastering the CSS Grid Property. If you've landed directly on this article, I highly recommend starting with Part 1. It serves as the foundation for understanding the CSS grid. Now, let's dive in!
Grid container
To create a grid container, set the display property of an HTML element to grid or inline-grid. Within this container, grid items are organized in columns and rows.
In the grid container, we can control the alignment using properties like justify-content and align-content. In this property, we can give different values, like center, start, end, or more.
Now, let's understand the justify-content and align-content properties in the context of the grid container.
Justify-content property
The CSS justify-content property controls the distribution of space between and around items along the main axis of a flex or grid container, allowing for horizontal alignment of items.
The start, end, or center values are shown below as examples.
<head>
<style>
.container-1 {
display: grid;
justify-content: start;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
justify-content: end;
background-color: steelblue;
padding: 10px;
}
.container-3 {
display: grid;
justify-content: center;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid container justify-content: start</h1>
<div class="container-1">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
</div>
<h1> The Grid Property justify-content: end</h1>
<div class="container-2">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
</div>
<h1> The Grid Property justify-content: center</h1>
<div class="container-3">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
</div>
</body>
The space-evenly, space-between, and space-around values are shown below as examples.
<head>
<style>
.container-1 {
display: grid;
justify-content: space-evenly;
grid-template-columns: 10% 10% 10%;
background-color: steelblue;
padding: 20px;
}
.container-2 {
display: grid;
justify-content: space-between;
grid-template-columns: 10% 10% 10%;
background-color: steelblue;
padding: 20px;
}
.container-3 {
display: grid;
justify-content: space-around;
grid-template-columns: 10% 10% 10%;
background-color: steelblue;
padding: 20px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid Property justify-content: space-evenly</h1>
<div class="container-1">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<h1> The Grid Property justify-content: space-between</h1>
<div class="container-2">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
<h1> The Grid Property justify-content: space-around</h1>
<div class="container-3">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
</div>
</body>
Align-content property
The grid align-content property utilizes the align-content property to vertically align content within a grid container.
The space-evenly and space-around values are shown below as examples.
<head>
<style>
.container-1 {
display: grid;
height: 300px;
align-content: space-evenly;
grid-template-columns: auto auto;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
height: 300px;
align-content: space-around;
grid-template-columns: auto auto;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid Property align-content: space-evenly</h1>
<div class="container-1">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box</div>
</div>
<h1> The Grid Property align-content: space-around</h1>
<div class="container-2">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box</div>
</div>
</body>
The space-between and start values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
height: 300px;
align-content: start;
grid-template-columns: auto auto;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
height: 300px;
align-content: space-between;
grid-template-columns: auto auto;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid Property align-content: start</h1>
<div class="container-1">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box</div>
</div>
<h1> The Grid Property align-content: space-between</h1>
<div class="container-2">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box</div>
</div>
</body>
The end and center values are shown below as an example.
<head>
<style>
.container-1 {
display: grid;
height: 300px;
align-content: end;
grid-template-columns: auto auto;
background-color: steelblue;
padding: 10px;
}
.container-2 {
display: grid;
height: 300px;
align-content: center;
grid-template-columns: auto auto;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1> The Grid Property align-content: end</h1>
<div class="container-1">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box</div>
</div>
<h1> The Grid Property align-content: center</h1>
<div class="container-2">
<div class="items items-1"> 1. Box</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box</div>
</div>
</body>
Grid items
Grid items are inherent in every grid container by default. Each container has one grid item for each column in each row. However, you can apply styling to all grid items using the grid property.
In the below example, we utilize grid-column and grid-row properties. Grid-column is a shorthand for grid-column-start and grid-column-end, while "grid row" summarization "grid row start" and "grid row end."
In the code below, we've made a 7-item grid layout. We set the rows and columns using the shorthand property.
<head>
<style>
.container {
display: grid;
gap: 10px;
background-color: steelblue;
padding: 30px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-1 {
grid-column: 1 / span 2;
grid-row: 1;
}
.items-2 {
grid-column: 3;
grid-row: 1 / span 31;
}
.items-3 {
grid-column: 1;
grid-row: span 20;
}
.items-4 {
grid-column: 2;
grid-row: span 20;
}
.items-5 {
grid-column: 1 / span 3;
grid-row: 32 / span 18;
}
</style>
</head>
<body>
<h1> Grid 7 Items Layout</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
</div>
</body>
As you can see in this example, all of the grid container's child elements are automatically created as grid items. Items 1 to 5 are spread across multiple columns and rows, as we've defined.
You can place grid items using line numbers or the span keyword to determine the number of columns and rows the item occupies.
When using the span tag, it counts cells; without it, it counts lines. In this example, the span tag is used for item 1 but not for item 2.
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: steelblue;
padding: 30px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-1 {
grid-row: 1 / span 2;
}
.items-2 {
grid-row: 1 / 2;
}
</style>
</head>
<body>
<h1> Box 1 has a span tag, while Box 2 does not.</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
</div>
</body>
Important: When using the span keyword, the calculation includes the entire grid box, while without it, only individual line numbers are counted within the grid.
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: steelblue;
padding: 30px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-1 {
grid-column: 1 / span 3;
}
.items-2 {
grid-column: 1 / 3;
}
</style>
</head>
<body>
<h1> Box 1 has a span tag, while Box 2 does not.</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
</div>
</body>
Grid area property example
Let's examine a practical example of the grid area property. As previously mentioned, the shorthand properties for grid area 4 include grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
In the following example, box 2 is defined with the first value set to 2, representing grid-row-start. This is followed by the value 2, denoting grid-column-start. Next, the value 9 is assigned to the grid-row-end, and finally, the value 1 is specified for the grid-column-end.
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: steelblue;
padding: 30px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-2 {
grid-area: 2 / 2/ 9 / 1;
}
.items-5 {
grid-area: 1 / 2 / 7/ 6;
}
</style>
</head>
<body>
<h1> Grid-area shorthand property example</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
<div class="items items-9"> 9. Box </div>
<div class="items items-10"> 10. Box </div>
<div class="items items-11"> 11. Box </div>
</div>
</body>
Naming grid items
Grid items can be named using the grid-area property. By doing so, you can reference these named grid items using the grid container's grid-template-areas property.
Each row in the grid-template-areas property is separated by an apostrophe (''). Columns within each row are defined inside apostrophes and separated by spaces.
Unnamed grid items are represented by a period sign (.).
<head>
<style>
.container {
display: grid;
grid-template-areas: 'myArea myArea myArea myArea ';
gap: 10px;
background-color: steelblue;
padding: 30px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-1 {
grid-area: myArea;
}
</style>
</head>
<body>
<h1> Naming grid item example</h1>
<div class="container">
<div class="items items-1"> 1. Box myArea </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
<div class="items items-9"> 9. Box </div>
</div>
</body>
<head>
<style>
.container {
display: grid;
grid-template-areas: 'boxArea boxArea . . . ';
gap: 10px;
background-color: steelblue;
padding: 30px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-1 {
grid-area: boxArea;
}
</style>
</head>
<body>
<h1> Naming grid item example</h1>
<div class="container">
<div class="items items-1"> 1. Box boxArea</div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
<div class="items items-7"> 7. Box </div>
<div class="items items-8"> 8. Box </div>
<div class="items items-9"> 9. Box </div>
</div>
</body>
<head>
<style>
.container-1 {
display: grid;
grid-template:
'header header header header'
'menu main aside aside'
'menu main aside aside'
'menu footer footer footer';
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items-1 {
grid-area: header;
}
.items-2 {
grid-area: menu;
}
.items-3 {
grid-area: main;
}
.items-4 {
grid-area: aside;
}
.items-5 {
grid-area: footer;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> Naming grid items example</h1>
<div class="container-1">
<div class="items items-1"> Header </div>
<div class="items items-2"> Menu </div>
<div class="items items-3"> Main </div>
<div class="items items-4"> Aside </div>
<div class="items items-5"> Footer </div>
</div>
</body>
The order of the items
In a grid layout, items can be placed anywhere based on preference or purpose. The first item in the HTML code doesn't need to be displayed as the first item in the grid. The order of items in the grid can be adjusted independently of their order in the HTML code.
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
.items-1 {
grid-area: 1 / 3 / 2 / 4;
}
.items-2 {
grid-area: 2/ 3 / 3 / 4;
}
.items-3 {
grid-area: 1/ 1 / 2 / 2;
}
.items-4 {
grid-area: 1/ 2 / 2 / 3;
}
.items-5 {
grid-area: 2/ 1 / 3 / 2;
}
.items-6 {
grid-area: 2/ 2 / 3 / 3;
}
</style>
</head>
<body>
<h1> The order of the list example</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
</body>
You can set up all the boxes with the help of media queries.
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: steelblue;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
}
@media screen and (max-width: 900px) {
.items-1 {
grid-area: 1 / span 3 / 2 / 4;
}
.items-2 {
grid-area: 3/ 3 / 4 / 4;
}
.items-3 {
grid-area: 2/ 1 / 3 / 2;
}
.items-4 {
grid-area: 1/ 2 / span 3;
}
.items-5 {
grid-area: 3/ 1 / 4 / 2;
}
.items-6 {
grid-area: 2/ 3 / 3 / 4;
}
}
</style>
</head>
<body>
<h1> The order of the list with media queries example </h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
<div class="items items-6"> 6. Box </div>
</div>
</body>
Full-screen size
900px desktop screen size
CSS Grid Functions
Repeat() Function
The "repeat" function in the CSS grid simplifies code by allowing you to repeat a value multiple times. It takes two parameters: the number of repetitions and the size of each column or row.
For instance, to create a grid layout with 5 columns, you could write:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}However, the "fr" unit represents one fractional unit of available space in the CSS grid, making the code repetitive. To streamline this, you can use the repeat function:
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1.5px solid rgba(7, 6, 6, 0.8);
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The Repeat() Function grid-template-columns</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
</div>
</body>
You can set up the rows in the same manner as we did with the columns; simply utilize grid-template-rows: repeat(5, 150px).
<head>
<style>
.container {
display: grid;
grid-template-rows: repeat(2, 150px);
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The Repeat() Function grid-template-rows</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
</div>
</body>
In the repeat() function, you can also use the auto-fill and auto-fit properties.
The auto-fill and auto-fit keywords within the repeat() function are powerful tools for creating responsive grid layouts in CSS.
By combining these keywords with the repeat() function and the grid-template-columns property, you can dynamically adjust the number of columns based on the available space in the viewport.
Auto-fit
Similar to auto-fill, auto-fit also fills the grid with as many columns as possible, but it stretches and shrinks the items to fill the available space. It ensures that there are no empty grid tracks, as it adjusts the size of the items to fit the container.
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The repeat() Function auto-fill property</h1>
<div class="container">
<div class="items items-1">1. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
laudantium.</div>
<div class="items items-2">2. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
laudantium.</div>
<div class="items items-3">3. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
laudantium.</div>
</div>
</body>
Minmax() Function
The minmax() function in CSS grid layout establishes a size range from a minimum to a maximum value. It's especially handy for crafting responsive designs that adapt to different screen sizes dynamically.
For smaller devices like mobile phones, the content shrinks until it reaches the minimum size specified, then stops resizing.
For larger screens like desktops, the content stretches until it reaches the maximum size specified, then stops resizing.
The minmax() function can be applied to grid-template-columns and grid-template-rows properties. It accepts two parameters: 1. minimum size and 2. maximum size.
You can write minmax() as follows:
minmax(300px, 2fr);
minmax(400px, 50%);
minmax(40%, 500px);
For example, to create a responsive grid layout with 5 columns, you can use the minmax() function. For instance, setting a minimum size of 20 pixels for mobile devices and a maximum size of 200 pixels for laptops can be achieved with:
In the below example, we used the function repeat() to repeat the function minmax() 5 times because we needed five columns. And minmax() is nested inside the repeat() function.
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(5, minmax(20px, 200px));
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 40px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The minmax() Function</h1>
<div class="container">
<div class="items items-1"> 1. Box </div>
<div class="items items-2"> 2. Box </div>
<div class="items items-3"> 3. Box </div>
<div class="items items-4"> 4. Box </div>
<div class="items items-5"> 5. Box </div>
</div>
</body>
With minmax() function content, we can easily expand and contract depending on the screen size.
Fit-content() Function
The "fit-content" function automatically adjusts the size of columns and rows based on the content inside them. It takes a parameter of either a length (e.g., pixels) or a percentage, determining the size of the content.
<head>
<style>
.container {
display: grid;
grid-template-columns: fit-content(100px) fit-content(600px) 1fr;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1px solid black;
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The fit-content() Function grid-template-rows</h1>
<div class="container">
<div class="items items-1"> 1. Box - Lorem ipsum dolor sit amet. </div>
<div class="items items-2"> 2. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,
qui.</div>
<div class="items items-3"> 3. Box - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum,
labore quo minus rerum repudiandae temporibus?</div>
<div class="items items-4"> 4. Box - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima
nam, a harum aut eligendi similique rem praesentium necessitatibus tempora aperiam.</div>
<div class="items items-5"> 5. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
rerum iure quisquam inventore nihil, veritatis adipisci minima doloribus ratione? Excepturi dolorem
necessitatibus error quam debitis dolore quae ea quo sed.</div>
</div>
</body>
In the given example, when the screen size reduces, the content in the boxes also shrinks. Initially, the first four boxes shrink, followed by the next two, and then the remaining three boxes.
You can see the change in your browser by reducing the screen size using this code.
<head>
<style>
.container {
display: grid;
grid-template-columns: fit-content(150px) fit-content(250px) fit-content(350px) 1.5fr;
background-color: steelblue;
gap: 10px;
padding: 10px;
}
.items {
background-color: thistle;
border: 1.5px solid rgba(7, 6, 6, 0.8);
padding: 20px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h1> The fit-content() Function grid-template-rows</h1>
<div class="container">
<div class="items items-1"> 1. Box - Lorem ipsum dolor sit amet. </div>
<div class="items items-2"> 2. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, qui.</div>
<div class="items items-3"> 3. Box - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, labore quo minus rerum repudiandae temporibus?</div>
<div class="items items-4"> 4. Box - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nam, a harum aut eligendi similique rem praesentium necessitatibus tempora aperiam.</div>
<div class="items items-5"> 5. Box - Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis rerum iure quisquam inventore nihil, veritatis adipisci minima doloribus ratione? Excepturi dolorem necessitatibus error quam debitis dolore quae ea quo sed.</div>
</div>
</body>
Conclusion
Once you've reviewed these examples and their explanations, you'll have a comprehensive understanding of the CSS grid layout. From grasping grid containers and items to harnessing advanced functions like repeat(), minmax(), and fit-content(), this series empowers you with the expertise to craft adaptable and responsive layouts.
If you've completed reading "Mastering CSS Grid Property Part 1" or "Mastering CSS Grid Property Part 2," you've likely gained valuable knowledge about CSS grid concepts and honed your skills.
If you have any questions about the CSS grid or anything related to web development, just ask us using the question box below. And you will get the answer soon.