Utilizing CSS for a specific row within the grid-template-areas placement

Question

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: grid;. One thing I'm struggling with is figuring out how to add background colors to individual rows.

#header{
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    grid-template-rows: 50px 200px;
    grid-template-areas:
    "google-logo . search"
    "advanced-search . ."
    }

I'm particularly stumped on how to give the row containing google-logo . search a cool gray background color. If anyone has any tips or suggestions to help me out, I would greatly appreciate it! Thank you so much in advance!

html css css-grid

Answer 1

Answer №1

One suggestion is to assign a class to these columns, for instance:

<div id="header">
  <div class="item1 bg-gray">1</div>
  <div class="item2 bg-gray">2</div>
  <div class="item3">3</div>
</div>

Then use the following CSS styling:

.bg-gray {
  background-color: gray
}

Here's an example snippet demonstrating this:

#header {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  grid-template-rows: 50px 200px;
  grid-template-areas: "google-logo . search" "advanced-search . ."
}

.bg-gray {
  background-color: gray;
}

<div id="header">
  <div class="item1 bg-gray">1</div>
  <div class="item2 bg-gray">2</div>
  <div class="item3">3</div>
</div>

Answer 2

One suggestion is to assign a class to these columns, for instance:

<div id="header">
  <div class="item1 bg-gray">1</div>
  <div class="item2 bg-gray">2</div>
  <div class="item3">3</div>
</div>

Then use the following CSS styling:

.bg-gray {
  background-color: gray
}

Here's an example snippet demonstrating this:

#header {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  grid-template-rows: 50px 200px;
  grid-template-areas: "google-logo . search" "advanced-search . ."
}

.bg-gray {
  background-color: gray;
}

<div id="header">
  <div class="item1 bg-gray">1</div>
  <div class="item2 bg-gray">2</div>
  <div class="item3">3</div>
</div>

Answer 3

Answer №2

You have the option to use an element or a pseudo element as shown below in order to add color to a specific row.

#header {
  height: 300px;
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  grid-template-rows: 50px 200px;
  grid-template-areas: "google-logo . search" "advanced-search . ."
}

#header::before {
  content:'';
  background:gray;
  grid-column: google-logo / search;
  grid-row: google-logo / search;
}

/* styling for individual elements */

#header div:nth-child(1) {
  background: yellow;
  grid-area: google-logo;
  margin:5px;
}

#header div:nth-child(2) {
  background: red;
  grid-area: search;
  margin:5px;
}

#header div:nth-child(3) {
  background: blue;
  grid-area: advanced-search;
}

<div id="header">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 4

You have the option to use an element or a pseudo element as shown below in order to add color to a specific row.

#header {
  height: 300px;
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  grid-template-rows: 50px 200px;
  grid-template-areas: "google-logo . search" "advanced-search . ."
}

#header::before {
  content:'';
  background:gray;
  grid-column: google-logo / search;
  grid-row: google-logo / search;
}

/* styling for individual elements */

#header div:nth-child(1) {
  background: yellow;
  grid-area: google-logo;
  margin:5px;
}

#header div:nth-child(2) {
  background: red;
  grid-area: search;
  margin:5px;
}

#header div:nth-child(3) {
  background: blue;
  grid-area: advanced-search;
}

<div id="header">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Utilizing CSS for a specific row within the grid-template-areas placement

Answer №1

Answer №2

Similar questions

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

If the ID (i.e. document.getElementById) is not found, then keep JavaScript running

Execute a function upon pressing the enter key

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

Eliminate any empty spaces between the HTML tags

Error encountered while trying to load the fonts

What are the benefits of keeping JavaScript and HTML separate in web development?

Steps to display a JSX component stored in a variable

Utilizing CSS to place an image on top of the upcoming <div> container

Navigational elements, drawers, and flexible designs in Material-UI

What is the best way to integrate Sass into my CSS?

Numerous slideshows using identical scripts

Retrieve highlighted text along with its corresponding tag in ReactJS

Need to adjust the layout of PHP form

Where will the user's input be stored?

Adjusting font size in dynamic containers relatively

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

The resource could not be loaded: net::ERR_FILE_NOT_FOUND error encountered when trying to load <img> tag