I am developing a simple UI using CSS grid layout and HTML. I have many grid rows and columns
This is how I have coded the CSS and HTML as follows
<!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>
I have not given any text in DIv class. But the grid are displays test Design-Area
How to hide this text.
PS: I am new to CSS and HTML
Note: Updated with complete code snippet
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
Remove the content:attr(class); property from the above class. You're now adding a content to the grid area that prints your classname.
Your problem is this part of the css, in which you show the attibute as the box's content, which you apparently don't want:
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
Removing this removes the text in your layout.
There is no display of test Design-Area unless you specifically put it there. So just remove the text.
.grid {
display: grid;
grid-template-areas: "Design-Area area-two";
grid-template-rows: 1fr 1fr;
}
.Design-Area {
border: 1px dotted grey;
grid-area: Design-Area;
}
.area-two {
border: 1px dotted grey;
grid-area: area-two;
}
<div class="grid">
<div class="Design-Area"></div>
<div class="area-two"> Here is text, Design-Area has no text </div>
</div>
Related
I have 20 element for a grid view. But I want only 3✕3 grid view, where there will be only 9 element in the view window. And the rest of the element should be placed in the right side of the window as a scrollable asset.**
No matter what the screen size is I want to show only the first 9 element in the grid.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
In this case the grid should flow vertically. And you can set it up like this with some calculation:
.cards {
/* how many columns on the first screen */
--cols: 3;
/* how many rows on the first screen */
--rows: 3;
/* grid gap */
--gap: 5px;
--width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
display: grid;
position: relative;
grid-auto-flow: column dense;
grid-template-rows: repeat(var(--rows), 1fr);
grid-auto-columns: var(--width);
grid-gap: var(--gap);
overflow-x: auto;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
<div class="card">THIRTEEN</div>
<div class="card">FOURTEEN</div>
</div>
.cards {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.card {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
</div>
A simple way to achieve this is by using nth-child CSS selector on your card class. Since, you want to display only he first 9 cards in the container, you will have to hide the cards from 10th position onwards.
Consider :nth-child(an + b). Here, the term b is the offset that you can specify to target cards. If you remove a and substitute the value of b as 10, it will target all the cards that appear as 10th child and later. The selector will be like so: :nth-child(n + 10). This is a comparatively readable solution.
Bonus Tip: To make sure the cards show up as 3 x 3 grid, you can explicitly update grid-template-columns CSS property to be repeat(3, 1fr) instead of repeat(auto-fill, minmax(150px, 1fr))
This is the final snippet:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
/* Hide card which occurs at 10th position and above */
.card:nth-child(n + 10) {
display: none;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
I use this tool and it makes everything easier : https://cssgrid-generator.netlify.app/
You just select wich grid you want, how many rows... and it gives you the css + html :)
i found jQuery code that prints out the div that is clicked inside a grid, how can i modify this code so that it adds class ".active" only to the div .grid_item that has been clicked, can somebody help me understand how to do this?
I have added the html and js down below.
$(".grid").click(function(event) {
var hoveredGridItems = $(this).children()
.filter(function() { return $(this).is(":hover"); });
if (hoveredGridItems.length > 0)
console.log(hoveredGridItems[0]);
else
console.log("no element detected!");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
$(".grid__item").click(function(event) {
$(".grid__item").removeClass("active");
$(event.currentTarget).addClass("active");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
.grid__item.active {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
Easiest way is to set an event handler on the individual "grid__item", not on the whole grid (rather than using the hover method which is a bit overly complex).
Then you can use the currentTarget of the event to get the item clicked to add the class. I also, before that, remove that active class from all the grid items so only the most recently clicked gets the class.
I need to implement in a grid without using data:[ ], so it has the same parameters as the horizontal header in the table (text, static, sortable, fixed, etc.).
There is a Pivot package, which provides such an opportunity, but unfortunately, I can't use it.
Is there an alternative way to create a vertical column in a grid?
P.S.: Treelist is also not an option.
I hope this will help you! (it is an independant solution, not a part of extJs)
<html>
<head>
<style>
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5rem;
grid-auto-flow: row dense;
}
.column1 {
grid-column-start: 1;
background-color: #f3f3f3;
padding: 2px;
}
.column2 {
grid-column-start: 2;
background-color: #ccc;
padding: 2px;
}
.column3 {
grid-column-start: 3;
background-color: #ccc;
padding: 2px;
}
</style>
</head>
<body>
<span class="column1">1</span>
<span class="column1">2</span>
<span class="column1">3</span>
<span class="column1">4</span>
<span class="column2">5</span>
<span class="column2">6</span>
<span class="column2">7</span>
<span class="column3">8</span>
<span class="column3">9</span>
<span class="column3">10</span>
</body>
</html>
It is my HTML & Javascript code:
footer {
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
}
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
"Javascript"
Jscode
I want Edge to be like this
Edge does not fit on the screen. Also, footer stops on the spot.
I tried both Javascript and CSS but it didn't work on Edge when there is no element at the bottom of the screen. I want to be at the bottom of the page when there are more elements than the screen.
I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes.
That being said, try using flexbox.
Insert all of your html in main and flexbox will push footer to the bottom of the page.
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FD2D; }
main { background-color: #DFDD; }
footer {
background-color: #049e8c;
height: 50pt;
text-align: right;
bottom: 0;
}
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>
If you want to try CSS Grids, you need to do something like this.
All HTML content goes into the Site-content section. Hope this helped :)
/* Stlyes to make the demo easier to see: */
html{
height: 100%;
}
body {
margin: 0;
display: grid;
height: 100%;
grid-template-areas:
"header_section"
"Site-content_section"
"footer_section";
grid-template-rows: 100px 100% 50px; /* 100px for header, 100% for content section, 50px for footer */
}
.header {
grid-area: header_section;
background-color: #FDD;
}
.Site-content {
grid-area: Site-content_section;
background-color: #DFD;
}
.footer {
grid-area: footer_section;
background-color: #049e8c;
text-align: right;
}
<body>
<div class= "header">Header</div>
<div class="Site-content">Content</div>
<div class= "footer">Footer</div>
</body>
I don't exactly get the point inside the question. Maybe If You want to put your footer full the windows you can try to use "position" with the value "absolute
footer {
position:absolute;
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
left:0;
}
<body>
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
</body>
I have a grid based control panel, that takes the width and height of the entire screen.
the grid area is 2/2 and and the top left grid cell is left without an element to occupy its area.
Under neath the grid (also with the screens dimensions), I have another Element.
I would like the area underneath the grid to respond to mouse events in the empty grid cell.
I was in search for this topic. I had the same problem. I included a snippet which illustrates that an anchor is unresponsive while it is under an empty cell.
Is there a way to make the link responsive while the grid setup is laying over it?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 50px;
}
a {
border: 1px solid red;
}
.grid {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: 100%;
height: 100%;
display: grid;
grid-column-gap: 8px;
grid-row-gap: 8px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
". widget2"
"widget3 widget4";
}
.grid-item {
position: relative;
background-color: silver;
}
.grid > div:nth-child(1) {
grid-area: widget1;
}
.grid > div:nth-child(2) {
grid-area: widget2;
}
.grid > div:nth-child(3) {
grid-area: widget3;
}
.grid > div:nth-child(4) {
grid-area: widget4;
}
</style>
</head>
<body>
Click me if you dare
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>