CSS: Creative ways to switch up background hues within a grid layout

Im working on a project with a similar layout to this

https://i.sstatic.net/okRL1.png

I am trying to achieve a chessboard effect in my grid layout, where the last element of one row has the same background color as the first element of the next row.

I have set up my container using CSS grid and placed some cards inside it. Is there a way I can achieve this effect using only CSS?

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.cards-container > a:nth-child(odd) {
  background-color: #4268af;
}
<div class="cards-container">
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
 </div>

htmlcssgrid

Answer №1

The desired selection consists of 2, skip 2, 2..., which cannot be achieved with just one selector, so we need to use two.

4n will generate 0, 4, 8, 12, 16, 20..., skipping by four instead of two

4n+1 will produce 1, 5, 9, 13, 17, 21..., also skipping four but starting from an odd number

Combining them gives us 

1, 4, 5, 8, 9, 12, 13, 16, 17, 20, 21...

The same logic applies for the second selector but starting from the second element

4n+2 results in 2, 6, 10, 14, 18..., skipping by four

4n+3 leads to 3, 7, 11, 15, 19..., again skipping four in the odd sequence

Combining these selectors provides 

2, 3, 6, 7, 10, 11, 14, 15, 18, 19...

See demonstration below

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.card:nth-child(4n),
.card:nth-of-type(4n+1) {
  background: blue;
}

.card:nth-child(4n+3),
.card:nth-child(4n+2) {
  background: red;
}
<div class="cards-container">
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>

</div>

Answer №2

To target specific cards in your CSS for static content, you can utilize the :not() selector along with the nth-child function. Check out the example below.

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.cards-container>.card:not(:nth-child(2), :nth-child(6)):nth-child(even),
.cards-container>.card:not(:nth-child(3), :nth-child(7)):nth-child(odd) {
  background: #4268af;
}
<div class="cards-container">
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
</div>

Answer №3

Utilize the even and odd selectors on table rows and cells.

tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
  background-color: yellow;
}

tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd){
  background-color: blue;
}
<table>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>

</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a div using ASP.NET when a button is clicked

I am currently attempting to display a loading div when a button is clicked, however, I am encountering some issues with the functionality. Javascript : <script type="text/javascript"> $(document).ready(function (e) { $(&a ...

c#javascriptasp.nethtml

Validation of Single Fields in Angular Reactive Forms

When I validate a reactive form in Angular, I expect the error message to show up beneath the invalid field whenever incorrect data is entered. <form (ngSubmit)=sendQuery() [formGroup]="form"> <div *ngFor='let key of modelKeys&ap ...

htmlangularformstypescriptreactive

What could be the reason for this tag not functioning properly?

I am facing an issue with my navbar where the <a> tag is not updating the URL to the new address. I have tried giving the <a> tag a z-index 999;, but it still doesn't work. This is a one-page site and I use # to make the browser jump to t ...

htmlcssflexboxnavbar

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

javascriptjqueryhtmlcsswordpress

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...

cssangularcss-transitions

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Minimizing Jitter in HTML5 and JavaScript Applications

I am currently working on developing a metronome as a hobby using JavaScript/HTML5 with the intention of turning it into a FirefoxOS app. One issue I've encountered is Jitter, which is unacceptable for Metronomes. As JavaScript is single-threaded and ...

javascripthtmltiming

Align a single item to the right in PrimeNG p-menubar

I am currently utilizing PrimeNG 8.1.1 and I am looking for a way to align one of the items to the right side (specifically the submenu options of logout and profile). Does anyone have any suggestions? this._menuItems = [ { labe ...

cssangularprimeng

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

Achieve center alignment for two column divs without altering the HTML code using only CSS

Recently, I stumbled upon a basic HTML code that I am unable to modify due to restrictions: <div id="container"> <div id="a"> Title col </div> <div id="b"> Left col </div> <div id="c"> ...

htmlcss

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

javascriptjquerycss

What could be causing OnChange to malfunction within Formik?

Formik in React is giving me trouble while working on a dummy app. When I set the value prop for the input boxes, I am unable to type anything. However, if I remove the value props, I can type but it doesn't reflect in the values when submitting. Tak ...

htmlreactjsformik

The SimpleHTTPServer is causing Google Maps Places Autocomplete feature to malfunction

Currently, I am implementing a location search feature along with form auto-fill using the google.maps.places.Autocomplete functionality. While accessing the HTML file directly (file:///location.html), everything is functioning as expected. However, when ...

javascriptpythonhtmlgoogle-mapsgoogle-maps-api-3

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: https://i.sstatic.net/1jZmh.png The blue background represents an image, with grey text boxes overlaid on top (one of which in ...

htmlcsstwitter-bootstrap

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

htmltwitter-bootstrap

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Update: Check out the link for some old photos here: I have a PHP file where I am creating divs with images as backgrounds using the code below (within a while-loop): echo ' <div class="pic" style="background:url('.$directory.'/'.$ ...

phpcssbackgroundinvisible

Increased height of iPad screen in landscape mode with no body content displayed (iOS7)

The issue: An unusual problem occurs when the specified URL is loaded on an iOS7 iPad in landscape mode; a vertical scrollbar appears. There is absolutely no content within the body, and it seems to be adjusting the body/html margin/padding. It should be ...

cssipadios7landscape

I would like to apply my CSS styles to all the hyperlinks on my website

This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...

htmlcss