Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin?
.container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5%;
row-gap: 1.5%;
margin-bottom: 30%;
}
div {padding:5%; border:1px gray solid;}<div class = "container">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div><div>
4
</div><div>
5
</div>
<div>
6
</div>
<div>
7
</div>
</div>Take a look at this:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.item {
border: 1px gray solid;
color: white;
padding: 20px;
text-align: center;
}
.item1 {
grid-area: 1 / 1 / 2 / 2;
background: red;
}
.item2 {
grid-area: 1 / 2 / 2 / 3;
background: green;
}
.item3 {
grid-area: 2 / 1 / 4 / 3;
background: blue;
}
.item4 {
grid-area: 4 / 1 / 5 / 2;
background: brown;
}<div class="container">
<div class="item item1">
1
</div>
<div class="item item2">
2
</div>
<div class="item item3">
3-6
</div>
<div class="item item4">
7
</div>
</div>Check out the demonstration on CodePen: https://codepen.io/manaskhandelwal1/pen/qBaMoVm
There may be a more sophisticated approach to achieving this, but I believe I have found a solution by adjusting the row-gap using negative margins. I haven't made any changes to address the column-gap between blocks 3 to 6, but it should be achievable with negative margins as well.
Does this meet your requirements?
.container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5%;
row-gap: 1.5%;
margin-bottom: 30%;
}
div {padding:5%; border:1px gray solid;}
div.specialDiv {
padding: 0;
margin: 0;
background-color: blue;
color: white;
}
div.specialDiv.bott {
margin-top: -.375%;
margin-bottom: -.75%;
}
div.specialDiv.top {
margin-top: -.75%;
margin-bottom: -.375%;
}<div class = "container">
<div>
1
</div>
<div>
2
</div>
<div class="specialDiv top">
3
</div>
<div class="specialDiv top">
4
</div>
<div class="specialDiv bott">
5
</div>
<div class="specialDiv bott">
6
</div>
<div>
7
</div>
</div>I am looking to style a ul list to function as a select form element. I have successfully populated a hidden input using my code. Now, I am trying to make the ul behave like a select input when either the keyboard or mouse is used. Previously, I had some ...
Struggling to transfer checked statements from HTML to JS file {{#each readValues }} <br> Plug: {{@index}} => {{this}} <input type='checkbox' class="plug" onclick="sendData();" /> {{/each}} The code above is written i ...
How can I achieve a sliding effect when clicking on the bottom-coupon class? Currently, I am only able to implement show and hide functionalities without any sliding effects. The picture slowly hiding from right to left, with the coupon-layer sliding out f ...
Currently facing a dilemma. When it comes to resizing checkboxes in HTML, the common recommendation is to use JavaScript to prompt the browser to adjust the size of the elements. However, in our scenario, we rely on wkhtmltopdf, a command line tool that u ...
Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...
Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...
Despite my efforts to search on various platforms, I have not been able to find a comprehensive solution to my query. Scenario: I currently have a webpage containing a div with multiple images. These images load without any issues and are set to open in ...
Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...
After implementing the code snippet below, I successfully managed to create a stylish Link with parameters that directs users to a specific page: <style> .fancy-link{ color: #FFFFFF; text-decoration: none; transition: ...
Creating my first MVC5/Razor application from the ground up, I want to avoid including unnecessary references that cause bloat. In the Views folder, I have separate Home and Shared subfolders. The Home folder contains Index.cshtml, while the Shared folder ...
I have implemented a brief script on my signup page to define the function checkUser(user) at line 6. In the code section at the end of the HTML for the sign up form, I included an inline script onBlur='checkUser(this) within the <input> named ...
The issue I'm facing with my song lyrics app is that the spinner does not disappear after fetching data from the API. It seems like JavaScript is unable to detect the presence of the spinner even though it exists when the remove function is called. I ...
I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why. How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this? Thank you! body ...
Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...
Trying to display an HTML page on local host using a restful flask API. The content of the HTML page appears as a string with "" instead of rendering the actual page. class data(Resource): def get(self): #return "Welcome!" return rende ...
I'm currently using the angular-fullstack generator and I've received data in response to a GET request in the form of integer values (1, 2 5, 6 134, 245 236, 567 415, 234 and so on). I'd like to display these values in an HTML t ...
I'm working on a form for my webpage and I want to enhance user experience by adding autocomplete functionality. The goal is to suggest existing names as users type in the 'name' input text box. Although I can see in my console that it&apos ...
I currently have four columns within a Grid container, each structured as follows: <Grid item> <Typography>Big Title 1</Typography> <Card className={classes.stretchMe}> <CardContent> ...
I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...
I am currently working with datatable Jquery and using an ajax call to retrieve data from the server. Let's assume that the database consists of three attributes: "Attribute1, Attribute2, Status". Depending on the Status attribute, I need to enable or ...