How to center everything?

[lepros]

I’ve been doing this project for grid practice. All that has gone pretty well. Now I would just like to know how I can center the entire thing. Do I have to just manually eyeball it and pick the column numbers that will put equal space outside the content? Thanks.

https://codepen.io/lepros/pen/gOGbyQV

[shugyoza]

Why do you have to make 25 columns when you only need 3 columns? That messed up the margin. Although you can determine the width of each element by assigning how many grid columns it occupies, it’s not the proper way to do it.

If you only needs 2, just set 2 grid-columns. We tweak with how many grid-columns an element has to occupy only when this kind of scenario example happens, e.g. : 2 rows and 3 columns. The first row is a navbar that spans the entire width, while the second row has 3 boxes. Than we tweak the navbar to occupy the entire 3 columns. That simple. Don’t over complicate things.

Subsequently we just need to play with margin and padding to position the whole grid container and each element in the grid.

And what this transform: translateY(-50%); is doing? This one also messed up with the page display, along with that grid columns problem. If you want to display as column, you can set your super-parent element to display as flex with flex-direction: column and you’re done. Or you can use grid with grid-template-areas to have more control of the layout.

Pay attention to the elements indentation in your html. It’s difficult to see which element is the parent of which elements. In such situation it’s harder to determine which css we need to tweak on.

Just in case you’re not aware. You can use browser’s dev tools to see your html layout and visualize your problem easier. right click > inspect > [click most left top icon] and hover your cursor over any element on your web page.

scratches:

* {
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  top: 50%;
  background-color: teal;
}

h1 {
  color: #702963;
  font-family: Arial, sans serif;
  padding-bottom: 10px;
  font-size: 2.5em;
}

.headline {
  grid-column: 1;
  grid-row: 2;
}

.headline-text {
  grid-column: 1;
  grid-row: 3;
}

.headline > p {
  color: gray;
  font-family: Arial, sans serif;
  line-height: 1.5;
}

#reviews {
  grid-column: 2;
  align-self: end;
  grid-row: 2;
}

#report-guru {
  grid-column: 2;
  grid-row: 3;
}

#besttech {
  grid-column: 2;
  grid-row: 4;
  margin-right: 9em;
  margin-left: -9em;
}

.ratings {
  display: flex;
  align-items: center;
  background-color: lavender;
  border: solid;
  padding-left: 20px;
  font-family: Arial, sans serif;
  color: #702963;
  font-weight: 700;
}

.purple-card {
  background-color: #702963;
  border-radius: 10px;
  border: solid;
  padding: 20px;
  height: 250px;
}

.purple-card > p:last-child {
  line-height: 1.5;
}

.card-heading {
  display: flex;
  align-items: start;
}

img {
  max-width: 50%;
  max-height: 50%;
  padding: 10px;
  border-radius: 50%;
}

.name-title {
  padding: 5px;
}

.name {
  color: white;
}

.title {
  color: #bf40bf;
}

.body-text {
  padding: 10px;
  color: white;
}

.grid-container1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  margin: 9em;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin: 10em;
}

  #card1 {
    grid-column: 1;
    margin-top: 3em;
  }

  #card2 {
    grid-column: 2;
    margin-top: 6em;
  }

  #card3 {
    grid-column: 3;
    margin-top: 9em;
  }

[lepros]

@shugyoza I appreciate the input. You’re right about the number of columns. Initially I was just experimenting to try and learn. I often hear 12 columns and I just thought, “How many can I actually use?” and I just kept going from there without undoing it. I got ideas from your code but I didn’t copy/paste it. I just wanted to see if I could get it to work on my own with your ideas. Is it ok that I made one grid with three columns? Because I wanted to keep the two items on the top on the outside. I just figured I could leave the middle column empty on the top (basically what a “.” would do on a grid area template). What do you think?

Updated version:
https://codepen.io/lepros/pen/gOGbyQV

[shugyoza]

It’s your masterpiece man. It looks good now. What’s important is you know how to use the tools. I myself usually utilize a combination of nested flexbox and grid, e.g. using grid template areas for the global lay-out and use flexbox within each grid-cell to manage the child elements. That way we can isolate each grid cells layout/design to not affect the other cells. Less headache. If you get what I mean.

[lepros]

Thanks man. Yeah, I understand what you mean about flexbox. I used it for a few things that needed to be side by side within a few of the child elements. I appreciate your help!