Currently, I am in the process of creating a user interface using CSS grid layout and HTML. The design involves numerous grid rows and columns.
The structure of my CSS and HTML code is illustrated below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WP Desktop</title>
<style>
html, body, .grid-container { height: 98%; margin: 2; }
.grid-container * {
border: 2px solid blue;
position: relative;
}
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1.8fr 0.2fr 1fr;
grid-template-areas: "プロジェクトビュー Design-Area Design-Area Design-Area Outline" "プロジェクトビュー Design Source Others Outline" "プロジェクトビュー Terminal Terminal Terminal Properties";
}
.プロジェクトビュー { grid-area: プロジェクトビュー; }
.Design-Area { grid-area: Design-Area; }
.Design { grid-area: ""; }
.Source { grid-area: ""; }
.Others { grid-area: ""; }
.Terminal { grid-area: Terminal; }
.Outline { grid-area: Outline; }
.Properties { grid-area: Properties; }
</style>
</head>
<body>
<div class="grid-container">
<div class="プロジェクトビュー"></div>
<div class="Design-Area"></div>
<div class="Design" ><button id="btndesign" > Design </button></div>
<div class="Source"><button id="btnsource"> Source </button></div>
<div class="Others"><button id="btnothers"> Others </button></div>
<div class="Terminal"></div>
<div class="Outline"></div>
<div class="Properties"></div>
</div>
</body>
</html>In the given Div class tags, there isn't any text provided, yet the grid displays test Design-Area.
I'm still learning about CSS and HTML, so I would like to know how to remove this displayed text.
Kindly assist me with this issue as I continue exploring CSS and HTML features.
Note: Updated with complete code snippet