My goal is to design a CSS grid consisting of exactly 100 cells. The number of columns and rows is not crucial, as long as there are always 100 cells in total. I'm feeling a bit confused about how to accomplish this using the properties:
grid-template-rows: ...
grid-template-columns: ....
Can you provide some guidance on this?
Got it,
There are various methods to accomplish this, such as using 1*100=100, 2*50=100, 4*25=100, 5*20=100.
Feel free to use any of these methods and arrange them in any order, where the first one is row/column and the second one is row/column.
let row = [1, 2, 4, 5, 100, 50, 25, 20];
let column = [100, 50, 25, 20, 1, 2, 4, 5];
let parent = document.getElementById("parent");
parent.style.gridTemplateColumns = `repeat(${column[0]}, 1fr)`;
parent.style.gridTemplateRows = `repeat(${row[0]}, 1fr)`;#parent {
display: grid;
grid-column-gap: 0px;
grid-row-gap: 0px;
}<div id="parent">
</div>To view the result, you can inspect the #parent div in dev-tools/inspect mode.
Styling for the container :
grid-template-rows: repeat(5,auto);
grid-template-columns: repeat(20,auto);
Next step is to generate 100 elements (cells) as child components.
Adjustment
The comprehensive solution :
HTML CODE:
<div class="parent"></div>
CSS CODE:
.parent {
display: grid;
grid-template-rows: repeat(20, auto);
grid-template-columns: repeat(5, auto);
gap: 10px;
}
.child {
width: 100px;
height: 100px;
background-color: black;
}
JS CODE:
For generating 100 elements
let container = document.querySelector("div");
for (let i = 1; i <= 100; i++) {
let childElement = document.createElement("div");
childElement.className = "child";
container.append(childElement);
}
Important: This amendment creates 5 rows and 20 columns for better alignment.
Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...
I can't seem to get the image to show up on my page. Can anyone help me figure out what's wrong? ul li { background-image: url(logo.png); background-repeat: no-repeat; padding-left: 0px; } This is what I'm currently seeing: This is what ...
I'm currently learning React and faced a unique situation while working on projects. Here's the scenario - I have two React child components nested under a standard HTML element. If I need to target and style each individual React child element ...
Take a look at my login-form (here). I am having an issue where the Text-Field is not aligning properly with the login field - it seems to be shifted 10px to the left and right (margin). Can anyone point out what mistake I might have made? Your help would ...
I am currently working on creating a 2 player checkers game for my college project. However, I have hit a roadblock in determining the index of the 2D array when I click on a game piece. The HTML code structure I have divided into: table - representing ...
I'm attempting a seemingly easy task: placing one svg layer inside another and centering it. In this particular situation, I have a simple arrow (represented by an svg path) that needs to be nested within a rectangle (a square shape in this case). T ...
I am looking to use pure Javascript, not jQuery, to access all elements within a <ul> list and remove the active class from every item except for the one selected in my menu. Shown below is the list: <ul id='flash-menu'> <li id=" ...
Is there a way to horizontally center text inside a responsive div without relying on new CSS3 tricks? Check out this fiddle for reference: http://jsfiddle.net/M8rwn/ .iosSlider { position: relative; overflow: hidden; width: 100%; height: ...
Hey there! I have a feature on my website where users can write a description of themselves using a <textarea>. However, when they try to create line breaks by pressing [ENTERKEY], the text displays differently in different places. For example: Hell ...
Update: What should I do if the width size is unknown? Check out the demo on JS Fiddle If you visit the provided link, I am trying to achieve a zoom effect where only the image inside the div zooms, not the entire div itself. However, I seem to be missin ...
Currently, I am working on implementing the Material UI drawer and anchoring it to the top of my page. It is functioning correctly, however, I am encountering an issue where I am unable to adjust the width of the drawer. Despite trying to update the width ...
Within my accordion setup, the initial panel showcases a selection of icons. Upon choosing one of these icons, it triggers the display of one of three panels in place of the second accordion panel, based on the selected icon. The issue seems to be rooted i ...
Could it be that Chrome is evolving into the new IE in terms of CSS issues? Here is the code I have for creating ExtJS buttons within an accordion: var button = Ext.create('Ext.Button', { text: '<img src="'+resp.sellers.externa ...
I have created an image and text hover effect. There are four images and corresponding paragraphs for each image. When hovering over an image, the specific paragraph should replace the previous one using only HTML and CSS. Please note the following: The de ...
My website features a typewriter effect, but I want the animation to match the length of the words exactly. I attempted using JavaScript variables in CSS, but unfortunately, it's not functioning properly. Could someone please advise me on how to remed ...
I am in the process of creating a basic website layout that resembles this design. However, I am facing an issue where the webpage does not adapt well to different window sizes. Specifically, the elements with the classes .gameInfo and .playerList overlap ...
Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...
I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...
I'm attempting to modify the font of the pagination on my website. View image 1 Despite using a website builder, I couldn't find the option to change the font, so I resorted to inspecting the code to locate the correct class or id in order to u ...
Is there a way to hide the header image on for mobile devices only? I thought I had the right CSS code in place, as when I check the site on a virtual small screen, the image is hidden. @media (max-width: 768px) { .header-image { display:none ...