inventory items - 6 articles listed in the initial column

I am trying to organize my list into two columns, with the first column containing 6 items. How can I achieve this layout instead of having the content split evenly between the columns? 

ul {
      columns: 2;
      column-count: 2;
      height: 800px;
      li {
        list-style-type: none;
        padding: 1.25em 0 1.25em 50px;
        font: 20px/24px "PT Root UI";
        color: #272727;
        mix-blend-mode: normal;
        opacity: 0.8;
        display: inline-block;
      }
    }
<ul className="about-company-list">
      <li>
        First item description.
      </li>
      <li>
        Second item description.
      </li>
      <li>
        Third item description.
      </li>
      ...
</ul>

htmlcss

Answer №1

To make use of the `display: grid` property in modern browsers for a simple layout, you can set up a grid with six rows and two columns. This will ensure that the content flows from top to bottom in the first column before continuing in the second column:

ul {
  /* Using CSS Grid Layout: */
  display: grid;

  /* Define two columns, each taking up one fractional unit ('fr') of available space,
     and six rows, each also taking up one 'fr' unit of space: */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);

  /* Automatically place items into rows instead of columns by default: */
  grid-auto-flow: rows;
}

li {
  list-style-type: none;
  padding: 1.25em 0 1.25em 50px;
  font: 20px/24px "PT Root UI";
  color: #272727;
  mix-blend-mode: normal;
  opacity: 0.8;
  display: inline-block;
}
<ul className="about-company-list">
  <li>
    Successfully developing, creating thousands of jobs, making a significant impact on the economy of Kazakhstan.
  </li>
  <li>
    Building housing of all comfort levels.
  </li>
  <li>
    Developing construction projects beyond the borders of Kazakhstan.
  </li>
  
  <li>
    Implementing high complexity projects for international markets.
  </li>
  
  <li>
    Participating in large-scale government programs in the construction sector.
  </li>
</ul>

References:

Bibliography:

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

The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it? Check out the Js Fiddle for reference: h ...

csstwitter-bootstrapbootstrap-4popover

Is there a way to merge two :not() selectors together?

Attempting to achieve the following: :not(h1) > a, :not(figure) > a { background: #859900; } Encountering an issue as figure>a is matching with :not(h1)>a, and h1>a is matching with :not(figure)>a. How can I merge these selectors? ...

csscss-selectors

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ https://i.sstatic.net/hHAKz.png Any ideas on how to ac ...

jquerytwitter-bootstrapcssbootstrap-4

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

Update the gulp watch function to use gulp@4

We are currently in the process of transitioning from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9c8e978bbbc8d5c2d5ca">[email protected]</a> to gulp@4, and encountering difficulties during the switch. Upon r ...

javascriptcssnpmgulp

Use CSS to entirely customize the login page for WooCommerce

Having trouble changing a text using CSS, I've tried this code but it's not working... https://example.com/my-account/ "Sign Up" text div.u-column2.col-2 h2{ visibility:hidden; } div.u-column2.col-2 h2{ content: 'updated text&a ...

htmlcsswordpresswoocommerce

Issue with custom function not being triggered by datepicker onSelect in Internet Explorer with JQuery

I have a datepicker set up like this: $("#startDate").datepicker({ onSelect: changeDate }); This is used with the following input field: <input type="text" id="startDate" value="" class="dateField"/> This setup works well in Chrome, but encou ...

javascriptjqueryhtml

How to horizontally center a div between two floated elements

Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...

htmlcsstwitter-bootstrap-3

A more efficient approach to creating a personalized design

After realizing the original question was unclear and wouldn't solve my problem, I have decided to edit it and create a new one. For my project, I require a customized layout where users can move, resize, add, or remove each box according to their pr ...

javascriptjquerycsslayoutmargin

Choice pick, fails to display default

Default value is content1, but "text default show" is not displayed Please assist me.. jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.co ...

jqueryhtml

Guide to positioning an image at the center in jqm with the help of the Mosaic plugin

Recently, I started using JQuery mobile to create a mobile website for a local restaurant. To add captions to the images in the menu, I found and utilized the Mosaic JQuery plugin successfully. However, I encountered an issue with the alignment of images o ...

androidjqueryhtmlcssjquery-mobile

Capturing images on Android devices through the camera option using HTML input file type

Having an issue with an LG G2 Android device running version 4.4.2 and the default browser. I'm currently using this tag to allow users to upload images from their devices to the server: {<input type="file" accept="image/*;” />} When I clic ...

androidhtmlbrowserinput

Angular html components must always be enclosed with closing tags for proper rendering

Angular is giving me an error message about incorrect closing tags, but I have checked and all the tags seem correct with one open tag and one close tag for each. Below is my code: <div class="container-fluid"> <h6 class=" ...

htmlangularbootstrap-4

What is the best way to pass a variable using the href tag in jQuery?

for (var i in result) { $('#tgt').append( "<li><a href='/UpdateStatusData/?id='"+result[i]+" >"+result[i]+"</a></li>"); } I am facing an issue where the id is appearing blank when being extracted o ...

javascriptjqueryhtmlajax

Tips for controlling HTML elements using JavaScript

I'm currently working on implementing a mouse-over scale effect for an HTML image. I chose to use JavaScript for this task because I need the ability to manipulate multiple elements in different ways simply by hovering over one element. Below is the J ...

javascripthtmlcsswebkit

Generating tags dynamically with a function

Is there a way to showcase dynamic tags with proper line breaks in CSS? The responsive container needs to break gracefully: CSS: .tags { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: white; ...

javascriptcssreactjsecmascript-6

Add information to the <script> tag

There is a row that I sometimes clone. <script id="SubRow10" type="text/template"> <select id="SubSelect10" class="form-control" name="SubcategorySelect" required> <option value="m,2">Op1</option> <option value="m,3"&g ...

javascriptjqueryhtml

The caption below the image is not functioning correctly when hovering over it

I'm having trouble getting the text to appear correctly underneath the image. Whenever I hover over the image, the text seems to overlap it. I am sure there is a simple solution to this issue, but I can't seem to figure it out. Removing the inlin ...

javascriptjqueryhtmlcss

Looking to optimize iframing for various screen dimensions

Apologies for the basic question. I am looking for a way to make my iframe responsive on all screen sizes, adjusting both height and width accordingly. Could anyone provide guidance? The current iframe code I have is as follows: <iframe name="ROL_ ...

javascripthtmlcssiframe

Positioning an element absolutely inside a Material-UI React dialog

Currently, I am working on a Dialog component that includes a button located in the bottom right corner. When this button is clicked, it triggers the display of another div containing a list of items. However, I have encountered an issue where the list is ...

cssreactjsmodal-dialogmaterial-ui