I have formulated a form on my website that divides into two columns by using floats. I am interested in creating a "checkered" effect for these columns. Can anyone guide me on how to utilize nth-child to achieve this design layout? For reference, please check out the attached screenshot illustrating what I aim to accomplish. Below is a snippet of the HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Grade Calculator
</title>
<style type="text/css">
.form-group {
padding: 15px;
width: 45%;
float: left;
}
.form-group:nth-child(3n+0){
background: #e4e4e4;
}
form {
margin: 25px auto;
border-width: 0px 1px;
border-style: solid;
border-color: #ccc;
width: 50%;
}
label {
width: 350px;
margin: 0;
padding: 0;
display: block;
}
input {
width: calc(100% - 20px);
margin: 15px 0px;
}
</style>
</head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Era4Q8Ttswx16Rg3XXwdNh7LuVHYalpdgKUCOJGwMcgBX7OP6eVRcScpUQ68BMteFlRltJ8L3vXUMx8wG+4DEf3Oi4RZcMfq/H6H7MbdpUbBLssudRCbS2QNV6vILQ9uBG64j4wb2CKGAAM2+aw+BYfCpxNSeloQ2BbcnUnOHjk=" />
</div>
<div>
<div class="form-group">
<span id="aOneActualLbl">Assignment 1</span>
<input name="aOneActualTxt" type="text" value="8" id="aOneActualTxt" />
<span id="aOnePossibleLbl">Possible</span>
<input name="aOnePossibleTxt" type="text" value="10" id="aOnePossibleTxt" />
</div>
<div class="form-group">
<span id="aTwoActualLbl">Assignment 2</span>
<input name="aTwoActualTxt" type="text" value="8" id="aTwoActualTxt" />
<span id="aTwoPossibleLbl">Possible</span>
<input name="aTwoPossibleTxt" type="text" value="10" id="aTwoPossibleTxt" />
</div>
<div class="form-group">
<span id="aThreeActualLbl">Assignment 3</span>
<input name="aThreeActualTxt" type="text" value="9" id="aThreeActualTxt" />
<span id="aThreePossibleLbl">Possible</span>
<input name="aThreePossibleTxt" type="text" value="10" id="aThreePossibleTxt" />
</div>
<div class="form-group">
<span id="aFourActualLbl">Assignment 4</span>
<input name="aFourActualTxt" type="text" value="9" id="aFourActualTxt" />
<span id="aFourPossibleLbl">Possible</span>
<input name="aFourPossibleTxt" type="text" value="10" id="aFourPossibleTxt" />
</div>
<div class="form-group">
<span id="aFiveActualLbl">Assignment 5</span>
<input name="aFiveActualTxt" type="text" value="8" id="aFiveActualTxt" />
<span id="aFivePossibleLbl">Possible</span>
<input name="aFivePossibleTxt" type="text" value="10" id="aFivePossibleTxt" />
</div>
<div class="form-group">
<span id="aSixActualLbl">Assignment 6</span>
<input name="aSixActualTxt" type="text" value="8" id="aSixActualTxt" />
<span id="aSixPossibleLbl">Possible</span>
<input name="aSixPossibleTxt" type="text" value="10" id="aSixPossibleTxt" />
</div>
<div class="form-group">
<span id="aSevenActualLbl">Assignment 7</span>
<input name="aSevenActualTxt" type="text" value="8" id="aSevenActualTxt" />
<span id="aSevenPossibleLbl">Possible</span>
<input name="aSevenPossibleTxt" type="text" value="10" id="aSevenPossibleTxt" />
</div>
<div class="form-group">
<span id="aEightActualLbl">Assignment 8</span>
<input name="aEightActualTxt" type="text" value="8" id="aEightActualTxt" />
<span id="aEightPossibleLbl">Possible</span>
<input name="aEightPossibleTxt" type="text" value="10" id="aEightPossibleTxt" />
</div>
<div class="form-group">
<span id="aNineActualLbl">Assignment 9</span>
<input name="aNineActualTxt" type="text" value="8" id="aNineActualTxt" />
<span id="aNinePossibleLbl">Possible</span>
<input name="aNinePossibleTxt" type="text" value="10" id="aNinePossibleTxt" />
</div>
<div class="form-group">
<span id="aTenActualLbl">Assignment 10</span>
<input name="aTenActualTxt" type="text" value="8" id="aTenActualTxt" />
<span id="aTenPossibleLbl">Possible</span>
<input name="aTenPossibleTxt" type="text" value="10" id="aTenPossibleTxt" />
</div>
<div class="form-group">
<input type="submit" name="runCalculation" value="Calculate Grade" id="runCalculation" />
<span id="currentGradeLbl">Your current grade is B</span>
</div>
</div>
Looking at the image example attached below, it represents assignments 2, 3, 6, 7, and 10 shaded in grey to create a checkerboard pattern. Is there a way to achieve this layout through coding?