Ways to ensure next/image takes up all available grid space

Is there a way to make the next/image element span from grid 1 through 8? It seems to work fine with the imgtag but not with next/image.

.project {
  display: grid;
  margin-bottom: 4rem;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.project-img {
  grid-column: 1 / span 8;
  grid-row: 1 / 1;
  height: 30rem;
  border-radius: 0.25rem;
  box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
}

<article className='project'>
  <img
    src={img}
    className='project-img'
    alt={title}
    height='100%'
    width='100%'
  />
  <div className='project-info'>....</div>
</article>

Using next/image

Using img tag

cssreactjsnext.jsnextjs-image

Answer №1

I suggest exploring various solutions to your issue. To begin, I recommend practicing with CSS grid on a helpful website like this one. One solution is to ensure that your row does not start and end at the same "box." It should end at 2 to specify where it ends without including it. Another option is to utilize the grid-area property for styling the next/image element. Here's an example:

.project-image{
  grid-area: 1/1/2/8;
}

This code sets the row start at 1, column start at 1, row end at 1, and column end at 8. You can also break down the grid-area property into its individual properties like grid-row-start, grid-column-start, grid-row-end, and grid-column-end. This would look like:

.project-image{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 8; 
}

If none of these solutions work for you, consider visiting the recommended website for more assistance. Even if my suggestions do work, it will further enhance your understanding of CSS grid.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalized JavaScript Arrays

Seeking assistance to format data received from an API. Can anyone provide guidance? fields: [ { name: "A", values: { data: [1, 2, 3, 4, 5] } }, { name: "B", values: { data: [6 ...

javascriptreactjsarraysjson

Transforming the hover color of a dropdown in Material-UI Select components using React

I'm struggling to change the color of my dropdown hover to green. I attempted using inline CSS and makeStyle(), but neither of these solutions seem to be working for me. I'm unsure how to go about changing this hover color. If anyone has any insi ...

reactjsuser-interfacematerial-ui

What is the process for embedding HTML and CSS content into an Outlook email?

Has anyone experienced trouble adding an HTML and CSS web page to an Outlook email? I attempted to use the "Insert as text" option, but the CSS file is not loading correctly in Outlook. Any suggestions on how to fix this? The error message states that the ...

jquerycsshtmlweb

How can I create a semantic-ui dropdown with a dynamically generated header?

Here are the dropdown options: const options = [ { key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' }, { key: '2', text: 'Example 2', value: 'Example 2', t ...

javascriptreactjsdrop-down-menusemantic-uisemantic-ui-react

Prevent the Icon in Material UI from simultaneously changing

I'm working on a table where clicking one icon changes all icons in the list to a different icon. However, I want to prevent them from changing simultaneously. Any suggestions on how to tackle this issue? Code: import React from 'react'; im ...

javascriptcssreactjstypescriptmaterial-ui

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...

htmlcssbootstrap-4

The media query targeting a specific max-width and below appears to be malfunctioning

So, I'm experiencing an issue where the browser I'm using doesn't seem to be picking up the styles I've set for a max-width of 960px and below. Can anyone provide insights into what might be causing this? Any assistance would be highly ...

cssresponsive-designmedia-queriesresponsive

Webpack 5 is failing to bundle re-exports correctly

Whilst bundling my web application, I've come across an issue with re-exports of certain modules not behaving as expected. Despite trying various optimization settings, I have been unsuccessful in resolving this issue. Setup Here's the setup tha ...

reactjstypescriptbundlewebpack-5

The feature for choosing rows is not functioning properly when using materializecss in Tabulator

While working on my project, I encountered an issue with selecting rows. After some debugging, it was revealed that the culprit behind this behavior is the tabulator_materialize.min.css file. Interestingly, when I don't use this CSS, everything functi ...

csstabulator

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

jqueryhtmlcss

Issue arises when compiling React Redux due to a union type that includes undefined

I am currently in the process of learning how to integrate Redux with React using Typescript. I encountered a compilation error that relates to the type of my store's state, specifically as {posts: PostType[]}. The error message states: Type '{ p ...

reactjstypescriptreduxreact-reduxreducers

How can you access the query in Next.js API when req.query is initially set to undefined?

Is there a way to compare the value of req.query with the cookies on the site, even when req.query is undefined upon initial load? How can this be addressed? export default async function handler(req, res) { const { method } = req; const userId = req ...

javascriptnext.js

Ensuring JS consistently monitors changes in value

Is there an equivalent of (void update) in Unity that is called every frame in Web Development (using JavaScript)? "I want it to continuously check if certain values have changed and then update them accordingly." let governmentprice = parseFloat(select ...

javascripthtmlcss

Building state from multiple child components in Next.js/React: Best Practices

To better illustrate this concept, I suggest checking out this codesandbox link. This is a follow-up to my previous question on Stack Overflow, which can provide additional context. Currently, when interacting with the child elements (such as inputs), th ...

reactjstypescriptnext.jsstate

Heroku - JavaScript and CSS Updates Causing Loading Issues

Ruby version: 2.1.5 | Rails version: 4.1.1 For some reason, the changes I make to my JavaScript and CSS files are not reflecting on Heroku; it seems like the cached assets are still being used. I've tried removing the assets and precompiling them bef ...

javascriptcssruby-on-railsherokuruby-on-rails-4.1

Error 404: Next.js Navigation Not Detected

I've recently launched a new Next.js project and I'm currently working on implementing client-side navigation. However, I am facing an issue where I am unable to navigate to routes other than "/". Layout.js : import "../styles/globals.css&q ...

next.jsnextjs-dynamic-routing

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4

The position of the HTML class shifts when the window is resized

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 ...

htmlcssweb

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...

phphtmlcssbootstrap-4

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

htmlcsstwitter-bootstrapbootstrap-5