/    Sign up×
Bounties /Pin to ProfileBookmark

css grid question

+ 1,000
Copy linkTweet thisAlerts:
Mar 12.2023

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?

to post a answer
CSS

2 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);

Was this helpful?

Copy linkTweet thisAlerts:
@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.
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...