Putting footer links into different columns

I would suggest you create your own menu for each menu you want to show in a column. This way, you only need to set the menus inside your widgets and will not face any problems. It is also ok for a menu to have just one item if needed.

1) You can not seperate a menu on the widgets page. This is not what the widget page was made for. Moreover, menus are meant to bring together multiple page links. So it is not intended to seperate them again. To be more clear: Why put the items inside of a menu (and bring them together) if you want to seperate them? Just create multiple menus.

2) With the help of a plugin, it is possible to add widets to your menus: https://wordpress.org/plugins/wp-widget-in-navigation/ But I don’t know if it solves your problem.

---

When I got it the right way, you just want to have three seperate lists of menu items inside a three column layout. The easiest way is to create three menus and put them in your already existing footer widgets.

You can also adjust your footer.php file in your theme (make sure to use child theme if it is not a theme you created by yourself) and do not use widgets for that.

In the backend “Design” -> “Menus” if you hover the “delete menu” link, you will find the id of your menu.

With this menu id, you can get the items of the menu in your footer.php file.

<?php
    $menuID = '12'; // ID of your menu
    $primaryNav = wp_get_nav_menu_items($menuID); // get your menu items
?>

You can then loop through your menu items:

<ul>

<?php
    foreach( $primaryNav as $item ) {
        $link = $item->url; // get the url of item
        $title = $item->title; // get title of item
        ?>

        <li class="item"><a href="https://wordpress.stackexchange.com/questions/366787/<?php echo $link; ?>"><?php echo $title; ?></a></li>

<?php } ?>

</ul>

Hope this helps!

Creating a three column layout is pretty easy:

<div id="your_footer">
    <div> <?php /* your foreach for menu with id... */ ?> </div>
    <div> <?php /* your foreach for second menu with id... */ ?> </div>
    <div> <?php /* your foreach for third menu with id... */ ?> </div>
</div>

In your css file:

#your_footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}