Внимательно прочитайте документацию и следуйте инструкциям.Даже в W3schools есть хорошие учебники по сеткам CSS.Это было моей отправной точкой, когда я только изучал CSS-сетки.Таким образом, кажется, вы не следовали их учебникам или другим учебникам, как следовало бы, потому что вы делали вещи, которые, как я считаю, учат вас не делать.Теперь давайте разберем, что я имею в виду под этим.
Во-первых, причина, по которой CSS-сетки существуют, НЕ для вас по-прежнему использовать display: inline-block или float для элементов, которые вы уже позиционировали или хотите позиционировать с помощью display: grid;.Я говорю об этой конкретной строке:
table {
display:inline-block;
}
form {
display:inline-block;
float:right;
}
Вы использовали inline-block и float в форме и таблице, которые являются элементами, которые вы пытаетесь расположить с помощью display-grid.Это не цель.Вы должны придерживаться одного.Либо разместите их только с сеткой отображения, либо используйте встроенный блок отображения.Даже если вы на самом деле не указали на них display-grid, но это те же самые элементы, которые вы в конечном итоге назначите свойству grid-area после передачи display: grid их родителям.
так с этим существомсказал, вот изменения: сначала я закомментировал их и вместо этого использовал их div-обертки, чтобы расположить их.Под оболочкой div я подразумеваю div, который вы создали с class ="forms" и class="tables".Кроме того, вместо того, чтобы дать display:grid телу, я вместо этого дал вам gridcontainer div, который вы создали и снова не использовали.Наконец, я также поместил заголовок, который находится вне вашей таблицы, в div, потому что тег заголовка должен быть вставлен сразу после тега таблицы.Короче говоря, сравните приведенный ниже код с тем, который вам нужен, чтобы понять внесенные мной изменения, и снова, посмотрите и прочитайте учебники.Даже w3schools, которые вы упомянули в качестве источника, из которого вы изучаете CSS-сетки, объясняют достаточно для того, чтобы вы могли выполнять поставленные задачи.И не останавливайся там.Продолжайте изучать другие уроки, а также счастливого кодирования.Вот рабочий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.gridcontainer {
display:grid;
grid-template-areas: 'schedule info-table';
/*
grid-template: 1fr 2fr;
grid-gap: 20px 20px 20px 20px;
*/
}
table,td,th {
border: 1px solid black;
border-collapse:collapse;
}
th {
background-color:black;
color:white;
font-family:verdana;
}
.time {
background-color:#D3D3D3
}
.button {
border:0;
background:transparent;
text-decoration: underline;
font-weight:bold;
cursor:pointer;
}
td {
font-family:Calibri;
}
/*
table {
display:inline-block;
}
*/
/*
form {
display:inline-block;
float:right;
}
*/
.tables {
grid-area: schedule;
}
.forms {
grid-area: info-table;
border: 2px solid black;
height: 80vh;
}
table {
height: 70vh;
width: 100%;
}
h1 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
caption {
display: block;
border-bottom: 1px solid black;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1> Soccer Camp Registration</h1>
</header>
<div class="gridcontainer">
<!--Did not understand why you need this, so I just commented it out. Also,
the colspan was throwing sintax errors. Check it!!!!-->
<!--
<colgroup>
<col class="times">
<colspan="7">
</colgroup>
-->
<div class="tables">
<table>
<tr class="days">
<th></th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td class="time">9:00 am-10:30am</td>
<td>Free Time</td>
<td rowspan="3">Technical Skills</td>
<td colspan="4">Training Session</td>
<td>Free Time</td>
</tr>
<tr>
<td class="time">10:30 am-12:00pm</td>
<td rowspan="3">Round Robin Games</td>
<td colspan="3" rowspan="2">Dribbling</td>
<td rowspan="2">Game Analysis</td>
<td> Agility</td>
</tr>
<tr>
<td class="time">1:00pm-2:30pm</td>
<td>Strength Training</td>
</tr>
<tr>
<td class="time">2:30pm-5:00pm</td>
<td colspan="3">Nutrition</td>
<td>Passing and Receiving</td>
<td colspan="2" rowspan="2">Campers Choice</td>
</tr>
<tr>
<td class="time">6:00pm-8:00pm</td>
<td colspan="5"> Night Games</td>
</tr>
</table>
<caption>July 2017 Weekly Schedule</caption>
</div>
<div class="forms">
<form method="POST"
action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<h2> Request Camp Information</h2>
<fieldset class="camplc">
<legend for="camplc"> Camper Location</legend>
<label for="province"> Province</label>
<select name="province" id="province">
<option value="BC"> British Columbia</option>
<option value="ON">Ontario</option>
<option value="AB">ALberta</option>
<option value="QC">Quebec</option>
<option value="YK"> Yukon</option>
</select>
</fieldset>
<fieldset class="campid">
<legend for="campid"> Camper Identification</legend>
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="fn">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="ln">
<br>
<label for="Gender">Gender</label>
<input type="radio" name="Gender" value="male" id="male">
<label for="male"> Male</label>
<input type="radio" name="Gender" value="female" id="female">
<label for="female">Female</label>
<br>
<label for="email">Email</label>
<input type="text" name="email" id="email"
placeholder="name@example.com">
<br>
<label for="age">Camper Age</label>
<select name="age" form="age">
<option value="8">8-9</option>
<option value="10">10-12</option>
<option value="13">13-15</option>
<option value="16">16-19</option>
</select>
</fieldset>
<fieldset class="info">
<legend for="info"> Please Send me information about</legend>
<input type="checkbox" name="infoa" value="Camp Dates" id="cd">
<label for="campdates"> Camp Dates</label>
<br>
<input type="checkbox" name="infoa" value="Camp Fees" id="cf">
<label for="campdates"> Camp Fees</label>
<br>
<input type="checkbox" name="infoa" value="Transportation"
id="tn">
<label for="campdates">Transportation</label>
</fieldset>
<fieldset class="questions">
<legend for="questions"> Question?</legend>
<textarea placeholder="Please enter any questions or comments
here" rows="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Request Info" class="button">
<input type="reset" value="Clear Form" class="button">
</form>
</div>
</div>
</body>
</html>
Вот рабочая ссылка с кодом на codepen: https://codepen.io/anon/pen/GPpXWM