I am currently working on designing a CSS grid that will consist of 3 columns for placing an unlimited number of "content DIVs" with equal heights, positioned in sequential order like the example below:
[1][2][3]
[4][5][6]
[7][8]
Any assistance or guidance on this matter would be greatly valued.
In order for a Grid Layout to work properly, the parent element must have its display property set to either grid or inline-grid.
Any direct child element of the grid container will automatically become a grid item.
Feel free to experiment with the code below:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
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;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<div class="grid-container">
<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 class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>When you apply the
grid-template-columns: repeat(3, 1fr)let count = $('.grid .item').last().text();
$('.grid').click(function() {
const item = $('<div class="item">')
const text = (count % 7 != 0 ? '' : ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, corporis.')
item.text(++count + text)
$(this).append(item)
}).grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="item">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, corporis.</div>
<div class="item">2</div>
</div>Check out this code snippet:
.wrapper{
display: flex;
flex-wrap: wrap;
padding: 0 2px;
margin: 0 16px 16px 16px;
}
.box{
padding: 10px;
width: 33.333%;
word-wrap: break-word;
box-sizing: border-box;
border: 1px solid #ccc;
}
My exploration of Flexbox began by testing it on an existing template sourced from a previous stackoverflow question. I am currently focusing on adjusting the image size to better fit within its parent div. max-width: 50px; height: auto; margin:auto; ...
My goal is to monitor a Twitch chat by scraping the web page http://www.twitch.tv/NAME_OF_CHANNEL/chat?opentga=1. The challenge I'm facing is that whenever a new message is typed in the chat, an additional ul item is appended to the HTML code. So, my ...
I'm struggling to align the main div in the center of the page with a 100% width or at least float it to the left. Can someone please advise on how to achieve this? http://jsfiddle.net/d36TC/6/ <div class="addInput"><div sytle="clear:both"& ...
I'm currently experiencing some difficulties when embedding HTML into VBA to send an email. The formatting is not appearing as intended, and I've been experimenting with different options. My first concern is regarding the font size displayed in ...
I am attempting to modify the color of a bootstrap 5 btn-outline-primary button. You can view an example at https://jsfiddle.net/nct2dpvf/17/. In the provided example, the standard button (with the class btn-outline-primary) does not change color on hover ...
I realize that a similar question has been asked before, but I want to clarify that my situation differs slightly from what I have found online. I am currently developing an embedded script that individuals can add to their websites. This script generates ...
Currently, I have a set of 10 icons that are scrolling horizontally from right to left. However, I am encountering an issue where at the end of the icon loop, there is a space causing the icons to jump back to the beginning. I am looking for a solution to ...
When receiving nested objects in the response, we must traverse to the property and display the values in the user interface. If we have a nested object like this: obj = { parent: { innerchild1: { innerchild2:{ displayText: ...
I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...
Whenever I click on an element, it triggers an input dialog that allows me to upload a photo. The server then responds with a JSON OBJECT containing 4 items: NAME, TYPE, HEIGHT, WIDTH. My goal is to refresh the element's background with the newly upl ...
I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...
Similar Questions: Custom attributes - Good or Bad? Non-Standard Attributes on HTML Tags. What are Your Thoughts? While working on a current learning project, I encountered the need to add an attribute that would store a numerical value. Initially ...
Recently, I've been tackling a Live Search solution for my data table. Success! When searching for Jim, everything works flawlessly. ...
Being a beginner in HTML and CSS, I recently encountered a challenge while working on some exercises. My goal was to create a website with a blur effect, so I decided to design a header with the class "showcase" and nested inside it, a div with the class " ...
Seeking guidance on how to incorporate pagination functionality akin to Twitter and Facebook, where a list of items loads initially and then a "load more" button appears below. When clicked, this button appends the list with additional items. Can anyone ...
I am currently learning AngularJS and I am experimenting with the sample code below to send my form data to the server. <!doctype html> <html lang=''> <head> <meta charset="utf-8"> <script src="../js/angular.min.v1 ...
I am facing an issue with my video implementation where the poster image is not returning after exiting full screen mode. I have a video with overlay content that requests full screen when the user clicks a custom play button. When the user exits full scre ...
Hey everyone, I'm new to web development and currently building a basic website on my computer. However, I'm facing an issue where the font I want to use is not changing. Both my HTML and CSS files are located in the correct folder and I am confi ...
When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...
I recently noticed an error in my VueJs SPA application when running a Chrome Lighthouse report. The error message indicated that the charset was not properly defined, even though I had added it to my index.html file. Below are screenshots of the issue: ...