Ways to avoid grid overflow

As a newcomer to CSS grid, I am struggling to understand how to prevent components from overflowing a grid. The section in question, with the class name of profile-widget-wrapper, is defined with grid-row:2/4 but is overflowing the grid. Can anyone provide guidance on how to fix this issue? Any assistance is greatly appreciated as I continue to learn about CSS Grid. Thank you.

https://i.sstatic.net/NAysk.png

.wrapper{  //main wrapper
 display:grid;
 grid-template-columns: 1fr 2fr 2fr;
 grid-template-rows: 100px 300px 100px;
}
.profile-widget-wrapper{    //section that is overflowing
    grid-row:2/4;
 }
<div class="wrapper">
 <section class="profile-widget-wrapper">
    <div class="profile-widget">
      <h5 class="title">PROFILE WIDGET</h5>
      <ul class="widget-optns">
         <li class="active">
           <h5>PROFILE OVERVIEW</h5>
         </li>
         <li class="count">
           <h5>FRIENDS</h5>
           <span class="friend-count">383</span>
          </li>
         <li class="count">
           <h5>GAMES OWNED</h5>
           <span class="games-owned-count">10</span> 
          </li>
         <li>
           <h5>STEAM QUICK LINKS</i></h5>
          </li>
      </ul>
  </div>
  </section>
 </div>

htmlcsscss-grid

Answer №1

Seems like you are facing issues with default margins and padding.

Additionally, you are trying to create a grid area spanning across two rows (2/4). It would be better to stick to just one row (2/3).

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-rows: 100px 300px 100px;
}

.widget-wrapper {
  /* grid-row: 2/4; */ /* spans two rows */
  grid-row: 2 / 3;     /* spans one row */
}

/* removing default styling markers, padding, and margins */
ul {
  padding-left: 0;
  margin-left: 0;
  list-style-type: none;
}

/* aligning content horizontally */
li {
  display: flex;
  align-items: baseline; /* to adjust h5 margins */
  justify-content: space-between;
}
<div class="container">
  <section class="widget-wrapper">
    <div class="widget">
      <h5 class="title">PROFILE WIDGET</h5>
      <ul class="widget-options">
        <li class="active">
          <h5>PROFILE OVERVIEW</h5>
        </li>
        <li class="count">
          <h5>FRIENDS</h5>
          <span class="friend-count">383</span>
        </li>
        <li class="count">
          <h5>GAMES OWNED</h5>
          <span class="games-owned-count">10</span>
        </li>
        <li>
          <h5>STEAM QUICK LINKS</h5>
        </li>
      </ul>
    </div>
  </section>
</div>

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

Tips for managing responsive font sizes as screen size decreases

Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries. You can check out th ...

htmlcssresponsive-designjoomla3.0

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

javascripthtmlcssgoogle-chrome

Use jQuery to swap out images and witness the image loading in real time

Currently, I am using jQuery to dynamically change images by using the code $('img').attr('src','newUrl'); However, whenever I do this, the image is only displayed once it has completely loaded. Due to my slow internet conne ...

javascriptjqueryhtmlimage

What is the best method for parsing information from the HTML source code of a specific tab on a webpage?

I have tried various methods mentioned in different responses, such as testing with different user agents (Chrome, Safari etc), and fetching HTML directly using HTTPClient and BufferedReader, but unfortunately none of them seem to be effective. How can I ...

javaandroidhtmlajaxjsoup

Incorporate a glyphicon into a webpage design that wasn't originally built with bootstrap while maintaining the original layout

Looking to jazz up my vintage website with some cool glyphicons on a specific page. Don't want to mess up the entire look of my site by installing bootstrap. Is there a way to add just the "glyphicons functionality" without changing everything else? ...

csstwitter-bootstrapglyphicons

Print the page number using HTML and PHP

Is there a way to center page numbers in HTML? I have the code below that echoes the numbers, but they always appear on the left side of the page. I tried wrapping them in a div to center them, which worked, but then each number is enclosed in its own d ...

phphtmlcssecho

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music. The issue is that the ...

htmlcssangularangular-material

Manipulating checkboxes with Jquery

I have set up a scenario with two divs and two checkboxes. When the first checkbox is clicked, the first div will appear. Subsequently, if the second checkbox is clicked, the second div will appear below the first div. I initially styled both divs. Howev ...

jqueryhtmlcheckbox

Deciphering the code within Javascript

So I have extracted the javascript code as a text from an html file, and I am looking to extract the value "CurrencyCode":"EUR" from it. I am particularly interested in capturing the EUR value. Does anyone have recommendations on the best way to do this? S ...

javascripthtmlparsing

The nested CSS grid is failing to show its nested elements on the page

Having trouble with a nested CSS GRID - the child grid items are not appearing correctly despite multiple checks on the markup. The first grid row should span three columns, as it does, and is set to display:grid with 2 child grid items. However, the chil ...

htmlcsscss-grid

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

javascriptjqueryhtmlcssrepaint

Tips for expanding a text input field vertically, not horizontally like in Facebook, while typing or by holding down the Shift key and pressing Enter

I've come across numerous plugins that enable vertical resizing of a textarea and others that allow horizontal resizing of an input field. However, I have yet to find one that enables vertical resizing of an input field similar to Facebook's comm ...

jquerycss

The WebView displays the source HTML using the loadDataWithBaseURL method instead of showing a rendered view

I am currently working on an application that utilizes WebView to display custom HTML content. However, I am facing an issue where when I execute the following code: loadDAtaWithBaseURL(URL, "<html><h1>TEST</h1></html>", "text/htm ...

androidhtmlandroid-webview

Retrieve the parent element of the selected tag within an iframe

I have an embed iframe that displays an HTML page. Now I am trying to retrieve the class of the parent item that was clicked. <iframe src="//example.com" id="frame" ></iframe> This is the CSS styling for the iframe: #frame{ width:380px; he ...

javascriptjqueryhtmliframe

Map on leaflet not showing up

I followed the tutorial at http://leafletjs.com/examples/quick-start/ as instructed. After downloading the css and js files to my local directory, I expected to see a map but all I get is a gray background. Can anyone advise me on what might be missing? T ...

javascriptcssleaflet

Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

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

htmlcss

The issue of jumpy CSS background on full screen mode for mobile devices is causing

While developing a web app, I encountered an issue with the responsive (parallax) full screen background. On mobile devices, the background does not extend below the toolbar, causing a jumpy effect when scrolling up and down in Firefox. I have tried differ ...

cssmobile

Ways to align a Unordered List (ul) in the middle

I have a list of items with some elements floated to the left. Currently, it looks like this: | A | B | C | D | E < empty space> | I would like it to appear as: | A | B | C | D | E | Centered on the page with centered contents as well. HTML < ...

htmlcss

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

css

Adjust the size of the HTML input font to decrease as additional text is entered

Is it possible to create an HTML text field that automatically adjusts the font size when the user types more characters than it can display? I know Acrobat has this feature for forms, but I'm looking to implement it in HTML. So, imagine having a te ...

htmlcsstextresponsive-design