Css hulp : display grid en gap
Maak ik een standaard HTML aan, met een gap in een grid layout, dan werkt het gewoon.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<style>
body
{
background-color: #000000;
color: #FFFFFF;
}
.change-grid
{
border: 1px solid;
max-width: 1020px;
display: grid;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-columns: auto auto;
padding: 10px;
position: absolute;
align-items: start;
}
.change-item
{
border: 1px solid;
max-width: 505px;
width: 450px;
height: 30px;
padding: 10px;
float: left;
}
</style>
<body>
<div class='change-grid'>
<div class='change-item'>1</div>
<div class='change-item'>2</div>
<div class='change-item'>3</div>
<div class='change-item'>4</div>
<div class='change-item'>5</div>
<div class='change-item'>6</div>
<div class='change-item'>7</div>
<div class='change-item'>8</div>
</div>
</body>
</html>
<style>
body
{
background-color: #000000;
color: #FFFFFF;
}
.change-grid
{
border: 1px solid;
max-width: 1020px;
display: grid;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-columns: auto auto;
padding: 10px;
position: absolute;
align-items: start;
}
.change-item
{
border: 1px solid;
max-width: 505px;
width: 450px;
height: 30px;
padding: 10px;
float: left;
}
</style>
<body>
<div class='change-grid'>
<div class='change-item'>1</div>
<div class='change-item'>2</div>
<div class='change-item'>3</div>
<div class='change-item'>4</div>
<div class='change-item'>5</div>
<div class='change-item'>6</div>
<div class='change-item'>7</div>
<div class='change-item'>8</div>
</div>
</body>
</html>
echter pas ik dit zelfde toe in dit en ik voeg het gedeelte van de CSS toe en van de page waar het om gaat.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.change-grid
{
border: 1px solid;
max-width: 1000px;
display: grid;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-columns: auto auto;
padding: 10px;
position: absolute;
align-items: start;
}
.change-item
{
border: 1px solid;
max-width: 505px;
width: 450px;
height: 30px;
padding: 10px;
float: left;
}
#changes
{
border: 1px solid;
border-color: #550000;
width: 1010px;
}
{
border: 1px solid;
max-width: 1000px;
display: grid;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-columns: auto auto;
padding: 10px;
position: absolute;
align-items: start;
}
.change-item
{
border: 1px solid;
max-width: 505px;
width: 450px;
height: 30px;
padding: 10px;
float: left;
}
#changes
{
border: 1px solid;
border-color: #550000;
width: 1010px;
}
Stuke code page
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
echo "<div class='change-grid'>
<form id='changes' action='index.php?menu=profile&action=edityes' method='POST'>";
foreach($diff as $row) {
if($row == $nick) {
if(!empty($nick)) {
echo "<div class='change-item'>You changed Nickname to : ".$row.".</div><div class='change-item'>Was before : ".$wname."<br />
<input type='hidden' name='Nickname' value='".$row."'></div>";
}
}
if($row == $wp) {
if(!empty($wp)) {
echo "<div class='change-item'>You changed Work number to : ".$row.".</div><div class='change-item'>Was before : ".$wphone."<br />
<input type='hidden' name='Wphone' value='".$row."'></div>";
}
}
if($row == $icen1) {
if(!empty($icen1)) {
echo "<div class='change-item'>You changed ICE Name 1 to : ".$row.".</div><div class='change-item'>Was before : ".$icename1."<br />
<input type='hidden' name='ICEName1' value='".$row."'></div>";
}
}
if($row == $icep1) {
if(!empty($icep1)) {
echo "<div class='change-item'>You changed ICE number 1 to : ".$row.".</div><div class='change-item'>Was before : ".$icephone1."<br />
<input type='hidden' name='ICePhone' value='".$row."'></div>";
}
}
if($row == $icen2) {
if(!empty($icen2)) {
$icename2 = 'Never set';
echo "<div class='change-item'>You changed ICE Name 2 to : ".$row.".</div><div class='change-item'>Was before : ".$icename2."<br />
<input type='hidden' name='ICEName2' value='".$row."'></div>";
}
}
if($row == $icep2) {
if(!empty($icep2)) {
$icephone2 = 'Never set';
echo "<div class='change-item'>You changed ICE number 2 to : ".$row.".</div><div class='change-item'>Was before : ".$icephone2."<br />
<input type='hidden' name='ICEPhone2' value='".$row."'></div>";
}
}
if($row == $addr) {
if(!empty($addr)) {
echo "<div class='change-item'>You changed ICE number 2 to : ".$row.".</div><div class='change-item'>Was before : ".$eaddr."<br />
<input type='hidden' name='Address' value='".$row."'></div>";
}
}
}
echo "<div class='change-item'>If this information is correct, click <input type='submit' name='submit'> to confirm.</div><div class='change-item'>
click <b><font color='#880000'><a href='index.php?menu=profile'>here</a></font></b> to cancel</div>";
echo "</form>
</div>";
<form id='changes' action='index.php?menu=profile&action=edityes' method='POST'>";
foreach($diff as $row) {
if($row == $nick) {
if(!empty($nick)) {
echo "<div class='change-item'>You changed Nickname to : ".$row.".</div><div class='change-item'>Was before : ".$wname."<br />
<input type='hidden' name='Nickname' value='".$row."'></div>";
}
}
if($row == $wp) {
if(!empty($wp)) {
echo "<div class='change-item'>You changed Work number to : ".$row.".</div><div class='change-item'>Was before : ".$wphone."<br />
<input type='hidden' name='Wphone' value='".$row."'></div>";
}
}
if($row == $icen1) {
if(!empty($icen1)) {
echo "<div class='change-item'>You changed ICE Name 1 to : ".$row.".</div><div class='change-item'>Was before : ".$icename1."<br />
<input type='hidden' name='ICEName1' value='".$row."'></div>";
}
}
if($row == $icep1) {
if(!empty($icep1)) {
echo "<div class='change-item'>You changed ICE number 1 to : ".$row.".</div><div class='change-item'>Was before : ".$icephone1."<br />
<input type='hidden' name='ICePhone' value='".$row."'></div>";
}
}
if($row == $icen2) {
if(!empty($icen2)) {
$icename2 = 'Never set';
echo "<div class='change-item'>You changed ICE Name 2 to : ".$row.".</div><div class='change-item'>Was before : ".$icename2."<br />
<input type='hidden' name='ICEName2' value='".$row."'></div>";
}
}
if($row == $icep2) {
if(!empty($icep2)) {
$icephone2 = 'Never set';
echo "<div class='change-item'>You changed ICE number 2 to : ".$row.".</div><div class='change-item'>Was before : ".$icephone2."<br />
<input type='hidden' name='ICEPhone2' value='".$row."'></div>";
}
}
if($row == $addr) {
if(!empty($addr)) {
echo "<div class='change-item'>You changed ICE number 2 to : ".$row.".</div><div class='change-item'>Was before : ".$eaddr."<br />
<input type='hidden' name='Address' value='".$row."'></div>";
}
}
}
echo "<div class='change-item'>If this information is correct, click <input type='submit' name='submit'> to confirm.</div><div class='change-item'>
click <b><font color='#880000'><a href='index.php?menu=profile'>here</a></font></b> to cancel</div>";
echo "</form>
</div>";
En hier werkt de gap ineens niet.
De PHP-code is verder niet echt relevant. Kan je het in een JSfiddle.net 'zandbak' met ons delen?
maar dit is een PHP page, dus hoe doe ik dat met die page een zandbak met je delen?
Toevoeging op 18/04/2023 18:03:45:
Ik voeg je wel een img toe
https://happy-truffles.com/grid-gap.jpg
https://docs.jsfiddle.net/getting-started
eerst komt de form en dan de div en niet andersom heb ik gemerkt.
Doe je dat niet, dan krijg je zulke problemen.
In je eerste voorbeeld heb je een div met display: grid, met daarin de divjes die de grid-items gaan worden als directe kinderen van je grid div.
In het tweede voorbeeld heb je diezelfde div met display: grid, met daarin maar 1 kind: je formulier. Binnen dat formulier heb je vervolgens de divjes waarvan je verwacht dat ze zich als grid-items gaan gedragen, met een gap er tussenin, maar nu zijn het dus geen kinderen meer, maar kleinkinderen van je grid div, omdat dat form ertussen zit, en daarom werkte het niet.