> For the complete documentation index, see [llms.txt](https://reyvaleza.gitbook.io/vibe.d-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reyvaleza.gitbook.io/vibe.d-tutorial/responsive-layout-using-css-grid.md).
# Responsive layout using CSS Grid
**CSS Grid** was designed to make it easier to lay out components on a page using standard CSS. It divides the page into a grid composed of rows and columns, like a table, which is similar to Bootstrap’s row- and col- classes. The added bonus is we don't have to download or reference an external library as it is built-in to CSS 3.
As an example, let’s create an HTML page **but we are not going to compile**.
Let us create **views\cssgrid.html**:
```html
CSS Grid Sample
1st
2nd
3rd
4th
5th
6th
7th
8th
9th
```
The line
`grid-template-columns: 150px 150px 150px;`
means we are making three columns, with each column 150 pixels wide.
The line
`grid-template-rows: 200px 200px 200px;`
means we are making three rows, with each row having a height of 200 pixels.
This way, we defined a three-by-three grid, or three rows with three columns.
**Do not compile**. Simply open it in File Explorer to open it in the browser, then resize the browser and make it small:
Then expand the browser:
You see that when you resize the browser, the blocks remain the same sizes.
Now let’s change the CSS to make the center column expandable.
```css
.container
{
margin: 0 auto;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 150px auto 150px;
grid-template-rows: 200px 200px 200px;
}
```
Refresh the browser. This time, when you expand or contract the browser, the middle column resizes automatically.
Now let’s make the middle row expandable too.
```css
.container
{
margin: 0 auto;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 150px auto 150px;
grid-template-rows: 200px auto 200px;
}
```
And resize the browser.
Now both the center column and the middle row are expandable.
We are just skimming the surface of CSS Grid here. There are so many variations in the use of CSS grid, but for now let us settle for this rudimentary knowledge. At least we are armed with the knowledge to develop the fixed navbar and the sticky footer without Bootstrap.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://reyvaleza.gitbook.io/vibe.d-tutorial/responsive-layout-using-css-grid.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.