CSS grid layout fit-content and center

Asked Jan 24 '21 at 11:22

Active Jan 24 '21 at 11:46

Viewed 264 times

I have a basic page layout of header, content, sidebar and footer.
The content should ALWAYS have a max width 1150px,
and the sidebar IF present should additionally have a max width of 450px.
1150 without, 1600px.

I'm using CSS grid width the following code:

.main {
  display: grid;
  gap: 20px;
  align-items: center; // <-- THIS
  grid-template-areas:
    "header   header "
    "content  sidebar"
    "footer   footer ";
  grid-template-columns: fit-content(1150px) fit-content(450px);
}

.main__header { grid-area: header; }
.main__content { grid-area: content; }
.main__sidebar { grid-area: sidebar; }
.main__footer { grid-area: footer; }

<div class="main">
    <div class="main__header"></div>
    <div class="main__content"></div>
    <div class="main__sidebar"></div>
    <div class="main__footer"></div>
</div>

However, using align-items: center doesn't seem to work on the element and center it as expected.

asked Jan 24 '21 at 11:22

Devon Ville

2,001
2
19
32

place-items:center ? – Temani Afif Jan 24 '21 at 11:36
nope. doesn't work. – Devon Ville Jan 24 '21 at 11:39
1

justify-content: center; ? – Temani Afif Jan 24 '21 at 11:40
nope. doesn't work. – Devon Ville Jan 24 '21 at 11:50
then define what kind of centring you are looking for – Temani Afif Jan 24 '21 at 11:51
exactly the one you were trying to give a solution to. It just doesn't center it in the middle of the page...as expected, – Devon Ville Jan 24 '21 at 11:57
1

it's centred for me: https://jsfiddle.net/zaqy41Lx/ – Temani Afif Jan 24 '21 at 12:11
my bad. justify-content: center; does work. confused it with justify-items: center that I have tried. – Devon Ville Jan 24 '21 at 12:54
Can I somehow have no gap when a sidebar is not present? it seems to add it regardless of the div... – Devon Ville Jan 24 '21 at 12:56

CSS grid layout fit-content and center

0 Answers0