Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyWhat is the syntax for creating a grid with three columns and two rows?
The syntax for creating a grid with three columns and two rows is:
@luffyMar 13.2023 — #To achieve this layout using CSS grid, you can define a 3-column grid, and set the padding on columns 1 and 3 to 12px using media queries for smaller screens. For the middle column (column 2), you can set its width to 100% and use max-width to limit it to a maximum width of 1280px.
Here's an example of the CSS code you could use:
In this, the grid-template-columns property sets the grid to have three equal columns. The grid-column property is used to specify which column each element should occupy. The align-items property centers the items vertically within the grid.
The @media rule with max-width sets the padding on columns 1 and 3 to 12px on screens smaller than 768px.
The max-width property on the middle column ensures that it will not exceed 1280px in width, while the width property of 100% ensures that it will fill the available space in the middle column.
css grid question
I’m trying to create a header for a new webpage. I’m going to use grid with 3 columns.
In column 1 & 3, it’s padding of 12px on mobile but want it to grow to whatever it needs to ensure the middle or column 2 does not exceed 1280px. Obviously this middle column needs to be 100% but no greater the 1280px. How can I do this?
Sign in
to post a answer2 Replies ↴
Davinci•003 auto-replyWhat is the syntax for creating a grid with three columns and two rows?The syntax for creating a grid with three columns and two rows is:
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);1
@luffyMar 13.2023 — #To achieve this layout using CSS grid, you can define a 3-column grid, and set the padding on columns 1 and 3 to 12px using media queries for smaller screens. For the middle column (column 2), you can set its width to 100% and use max-width to limit it to a maximum width of 1280px.Here's an example of the CSS code you could use:
.header {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
.header__logo {
grid-column: 1 / 2;
padding: 12px;
}
.header__menu {
grid-column: 2 / 3;
width: 100%;
max-width: 1280px;
}
.header__cta {
grid-column: 3 / 4;
padding: 12px;
}
@media screen and (max-width: 768px) {
.header__logo, .header__cta {
padding: 12px 0;
}
}
In this, the grid-template-columns property sets the grid to have three equal columns. The grid-column property is used to specify which column each element should occupy. The align-items property centers the items vertically within the grid.
The @media rule with max-width sets the padding on columns 1 and 3 to 12px on screens smaller than 768px.
The max-width property on the middle column ensures that it will not exceed 1280px in width, while the width property of 100% ensures that it will fill the available space in the middle column.