CSS KP 06 — Homepage, grid-template-columns, inline-grid, grid-column: 2;

4 min readSep 24, 2024

-display: inline-grid;
- grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);

set up html head for importing logo, font, index.css.

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&family=Bellefair&family=Barlow:wght@400;700&display=swap"
      rel="stylesheet">
  <!-- Our custom CSS -->
  <link rel="stylesheet" href="index.css">
  <title>Frontend Mentor | Space tourism website</title>
</head>
<body>

2. copy nav html from our design-system.html that we worked on and continue adding utility classes.

//index.html
<body>
  
  <header class="primary-header flex"> //<--- add flex and a class name
    <div>
      <img src="./assets/shared/logo.svg" alt="space tourism logo" class="logo">
    </div>  //<-- import logo 
    <nav>
        <ul class="primary-navigation underline-indicators flex">
            <li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span>00</span>Home</a>
            <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span>01</span>Destination</a>
            <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span>02</span>Crew</a>
            <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span>03</span>Technology</a>
        </ul>
    </nav>
  </header>
...

</body>

3. Add container class, h1, span, p, a. a with large-button styling

//index.html
<body>
  <header></header> //<--- logo and nav
  <section class="container">
    <h1 class="text-accent fs-500 ff-sans-cond uppercase letter-spacing-1">So, you want to travel to
    <span class="fs-900 ff-serif text-white">Space</span></h1>
    <p>Let's face it; if you want to go to space, you might as well genuinely go to 
     outer space and not hover kind of on the edge of it. Well sit back, and relax 
     because we'll give you a truly out of this world experience! </p>
    <a href="#" class="large-button uppercase ff-serif fs-600 text-dark bg-white">Explore</a>
  </section>
</body>

4. problem: button is too big.

display:grid button is too large. how can we fix it?

solution: change .large-button css display to inline-grid

//index.css

.large-button {
    position: relative;
    z-index: 1;
    display: grid; //<------here
    place-items: center;
    padding: 0 2em;

5. Set up a grid container with grid-template-columns

//html
<body class="home"> // <---- 
  <header></header>
  <div class="grid-container"> //<----create a new class called, grid-container
  <span class="fs-900 ff-serif text-white">Space</span></h1>

grid-template-columns but texts are not wrapping.

//css
//utility classes general

.grid-container {
    display: grid;
    grid-template-columns: 2em 60rem 2em;

problem: the middle column text isn’t wrapping

solution: we add minmax.

css

//css
//utility classes general

.grid-container {
    display: grid;
    grid-template-columns: 2em minmax(0, 30rem) 2em;

and we are dealing with 2 elements so we make the column 4.

grid-template-columns: 2em minmax(0, 40rem) minmax(0, 40rem) 2em;

6. Since we have 4 columns, we can create two arbitrary columns, so place the main two columns in the center.


  <div class="grid-container">
    <div></div>
    <article>
    <h1 class="text-accent fs-500 ff-sans-cond uppercase letter-spacing-1">So, you want to travel to
        <span class="fs-900 ff-serif text-white">S</span></h1>
        <p>Let’s face it; if you want to go to space, you might as well genuinely go to 
    outer space and not hover kind of on the edge of it. Well sit back, and relax 
    because we’ll give you a truly out of this world experience! </p>
    </article>
    <figure><a href="#" class="large-button uppercase ff-serif fs-600 text-dark bg-white">Explore</a></figure>
    <div></div>
  </div>

css


.grid-container {
    display: grid;
    grid-template-columns: 2em minmax(0, 40rem) minmax(0, 40rem) 2em;
    border: 1px solid red;
}

.grid-container > *:nth-child(1) {
    border: 3px solid red;
}

.grid-container > *:nth-child(2){
    border: 3px solid blue;
}

.grid-container > *:nth-child(3){
    border: 3px solid green;
}

.grid-container > *:nth-child(4){
    border: 3px solid purple;
}

problem: but why add unnecessary columns?

solution: -> set column number

7. we can also set which column is for which child element.

.grid-container {
    display: grid;
    column-gap: var(--container-gap, 2rem);
    grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
}

.grid-container > *:first-child {
    grid-column: 2;   ///<-----------------set column num 
    outline: 1px solid red;
}

.grid-container > *:last-child {
    grid-column: 3;  ///<------------------set column num
        outline: 1px solid yellow;

}

8. The Fr Unit

The fr unit is a fractional unit, an input that automatically calculates layout divisions when adjusting for gaps inside the grid.

CSS KP 06 — Homepage, grid-template-columns, inline-grid, grid-column: 2;

Written by Greem

No responses yet